webuploader api 文档 http://fex.baidu.com/webuploader/doc/ 在我们的项目中添加上传图片功能 原始页面如下

我们在原有的jsp上加上下面代码 （1）引入百度上传js css
    href="<%=basePath%>/plug-in/webuploader/js/webuploader.css">
     （2）调用百度上传组件
jsp 添加代码

                 :
                
                   
                   
                    
               
           
            
            
                 :
                
                    
                                             
                       
                      
               
           
            
            
                 :
                
                    
                    
               
           

在form表单提交时候
//判断是不是真增
var s=$("#id").val();
            var bz=3;
            var picurl=$("#picurl").val();
            if(s!=null&&s!=""&&s!=undefined){
                  //删除身份证文件夹中back的
                  $.ajax({
                        type: "POST",                                         
                        url: "uploadDataController.do?delIdcardPic",           
                        dataType: "json",                                  
                        data: { url: picurl,bz: bz},      
                        success: function (data) {              
                            }
                         
                    });
           
            };


java代码 @SuppressWarnings("unchecked")
    @RequestMapping(params = "uploadQMPic", method = { RequestMethod.POST,RequestMethod.GET })
    public void uploadQMPic(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {
        File targetFile = null;
        String msg = null;
        int code = 0;
        try {             //找到文件存储路径 ，根据实际情况定义
             String realPath = FileGenerater.getPathUpload("qianming_pic");
            
              if(request.getParameter("chunk") == null) {
                    String fileName = System.currentTimeMillis()+"_"+file.getOriginalFilename();//存在硬盘上的文件名
                    if(fileName.length()>32){//修改文防止名字过长
                        fileName = fileName.substring(0,fileName.length());
                    }
                    targetFile = new File(realPath, fileName);//存在
                    file.transferTo(targetFile); // 小文件，直接拷贝
                }else{
                    int chunk = Integer.parseInt(request.getParameter("chunk")); // 当前分片
                    int chunks = Integer.parseInt(request.getParameter("chunks")); // 分片总计

                    String Ogfilename = file.getOriginalFilename();
                    targetFile = new File(realPath, Ogfilename);
                    OutputStream outputStream = new FileOutputStream(targetFile, true);
                    InputStream inputStream = file.getInputStream();

                    byte buffer[] = new byte[1024];
                    int len = 0;
                    while ((len = inputStream.read(buffer)) > 0) {
                        outputStream.write(buffer, 0, len);
                    }
                    inputStream.close();
                    outputStream.close();
               }
               if(FileCheckUtil.isDanger(targetFile)){
                    throw new Exception("非法文件！");
                }
            //操作成功  
            Map map = new HashMap();
            code = 0;
            msg = "success！";
            map.put("filePath", targetFile.getAbsolutePath());
            map.put("fileName", targetFile.getName());
            map.put("fileLength", targetFile.length());
            ResponseUtil.flushJson(response, new JsonRe(code,msg, map));
                
        }catch(Exception e){
            //操作失败
            e.printStackTrace();
            msg = e.getMessage();
            ResponseUtil.flushJson(response, new JsonRe(1,msg, null));
        }
   }
/**
     * 删除上传的图片
     * @param request
     * @param response
     * @throws Exception
     */
    @SuppressWarnings("unchecked")
    @RequestMapping(params = "delIdcardPic", method = { RequestMethod.POST,RequestMethod.GET })
    public void delIdcardPic(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String url=request.getParameter("url");
        String bz=request.getParameter("bz");
        if(bz.equals("1")){
            if(url!=null){
                File f= new File(url);
                if(f.exists()){
                    f.delete();
                }
            }
        }else if(bz.equals("2")){
            if(url!=null){
                File f= new File(url);
                if(f.exists()){
                    f.delete();
                    //String newurl=url.substring(0,url.indexOf("_back"));
                    String newurl=url+"_back";
                    System.out.println(newurl);
                    File  newf= new File(newurl);
                    if(newf.exists()){
                        newf.renameTo(new File(url));
                    }
                }
                    
            }
            
        }else{
            if(url!=null){
                url=url+"_back";
                File f=new File(url);
                if(f.exists()){
                    f.delete();
                }
            }
        }
    }

上面保存完上传的图片，并且把路径保存到相应的表中了，现在我们就要实现编辑用户时候，这个图要显示出来在上面的jsp代码里， 我实现的思路是 ，通过表里保存的路径 ，拿到2进制数据，转base64，传到前台。 java代码  if(user.getSignatureFile()!=null&&!user.getSignatureFile().equals("")){
            File f = new File(user.getSignatureFile());
            FileInputStream input;
            try {
                input = new FileInputStream(f);
                byte[] buffer = new byte[(int) f.length()];
                input.read(buffer);
                input.close();
                //System.out.println(Base64.byteArrayToBase64(buffer));
                req.setAttribute("imgPath", Base64.byteArrayToBase64(buffer));
            } catch (FileNotFoundException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            
            
        }