JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能

一、去官网下载webuploader文件上传插件

https://fex.baidu.com/webuploader/

下载好后把它放到Javaweb项目的文件夹中（我放到了webcontent下面的static里面）

二、复制前端的样式

把这段代码放到你想要放到的位置（刷新页面和示例中不一样？不用担心因为你还没有初始化{就是还没有导入swf文件}，指定路径后刷新应该就好了）

三、复制实现文件异步上传的js代码（这里我们只复制图片上传的部分）

js源码的中文是乱码，应该是缺少谷歌改编码格式的插件，我这也没想办法解决，因为代码是能用的

四、修改必要的参数（直接附上修改后的源码）

 // 图片上传demo
 jQuery(function() {
     var $ = jQuery,
         $list = $('#fileList'),
         // 优化retina, 在retina下这个值是2
         ratio = window.devicePixelRatio || 1,

         // 缩略图大小
         thumbnailWidth = 100 * ratio,
         thumbnailHeight = 100 * ratio,

         // Web Uploader实例
         uploader;

     // 初始化Web Uploader
     uploader = WebUploader.create({
         //添加一些自己需要的参数

         // 自动上传
         auto: true,

         //sendAsBinary: true,

         // swf文件路径 （修改为swf文件的真实路径）
         /**
          *
          * statics/webuploader-0.1.5/Uploader.swf
          */
         swf: 'statics/webuploader-0.1.5/Uploader.swf',

         // 文件接收服务端 (改为处理图片上传自己定义的路由)
         server: 'uploader.jch',//本地存储

         // 选择文件的按钮。可选
         // 内部根据当前是创建，可能是input元素，也可能是flash
         pick: '#filePicker',

         // 只允许选择文件。可选
         accept: {
             title: 'Images',
             extensions: 'gif,jpg,jpeg,bmp,png',
             mimeTypes: 'image/*'
         }
     });

     // 当有文件添加进来的时候
     uploader.on( 'fileQueued', function( file ) {
         var $li = $(
                 '<div id="' + file.id + '" class="file-item thumbnail">' +
                     '<img>' +
                     '<div class="info">' + file.name + '</div>' +
                 '</div>'
                 ),
             $img = $li.find('img');
         //选择新图之前先清除之前的预览数据
         // 类选择器（class）用点（.）
         $('.thumbnail').remove();
         $list.append( $li );

         // 创建缩略图
         uploader.makeThumb( file, function( error, src ) {
             if ( error ) {
                 $img.replaceWith('<span>不能预览</span>');
                 return;
             }

             $img.attr( 'src', src );
         }, thumbnailWidth, thumbnailHeight );
     });

     // 文件上传过程中上传进度条实时显示
     uploader.on( 'uploadProgress', function( file, percentage ) {
         var $li = $( '#'+file.id ),
             $percent = $li.find('.progress span');

         // 避免重复创建
         if ( !$percent.length ) {
             $percent = $('<p class="progress"><span></span></p>')
                     .appendTo( $li )
                     .find('span');
         }

         $percent.css( 'width', percentage * 100 + '%' );
     });

     // 文件上传成功, 给item添加成功class，用样式标记上传成功
     // 这里是回调的地方，请求发出给对应的路由后，对应路由上的控制器方法
     // 处理请求（这里是将文件通过Storage上传到public磁盘）请求处理完成后
     // 给发出请求的人一个回应（回调）把一些数据传回去
     uploader.on( 'uploadSuccess', function( file,response ) {
         // 因为我们没有用到id值，所以file并不是我们请求成功的返回值
         // 想要接受回调的一些数据必须自己写,这个函数的第二个参数才是我们接受的返回值
         // 打印一下看看是不是
         // console.log(response);
         $( '#'+file.id ).addClass('upload-state-done');
         //将返回值中的path写到隐藏域中
         $('input[name=avatar]').val(response.path);
     });

     // 文件上传失败，显示上传出错
     uploader.on( 'uploadError', function( file ) {
         var $li = $( '#'+file.id ),
             $error = $li.find('div.error');

         // 避免重复创建
         if ( !$error.length ) {
             $error = $('<div class="error"></div>').appendTo( $li );
         }

         $error.text('上传失败');
     });

     // 完成上传完了，成功或者失败，先删除进度条
     uploader.on( 'uploadComplete', function( file ) {
         $( '#'+file.id ).find('.progress').remove();
     });
 });

修改参数说明：

　　　　①swf: 'statics/webuploader-0.1.5/Uploader.swf',这个是你下载的webuploader插件中swf文件的具体地址，一定要确保能导入进去，如果不确定可以打开浏览器的检查看是否有载入文件的报错，如果有就自己慢慢调试直到没有报载入的错误说明载入成功了

　　　　②server: 'uploader.jch',这个是你后端实现上传功能的控制器中方法的路由。（注意哦！本插件的上传文件到其他地方的代码是需要你自己在控制器中编写的）

　　　　③ 这段代码可以修改成一次只上传一张图片，每次只显示一张图片

暂时先修改这么多。刷新页面，看是否都正常，上传一张图片看是否会报错（如果浏览器不报错插件就不会报错，浏览器不报错插件就认为上传成功）

五、编写后台控制器代码

 package com.jch.controller;

 import java.io.File;
 import java.util.List;
 import java.util.UUID;

 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;

 import org.apache.commons.fileupload.FileItem;
 import org.apache.commons.fileupload.disk.DiskFileItemFactory;
 import org.apache.commons.fileupload.servlet.ServletFileUpload;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.ResponseBody;

 import net.sf.json.JSONObject;

 @Controller
 public class UploaderController {

     @ResponseBody
     @RequestMapping(value = "uploader.jch", method = RequestMethod.POST)
     public  JSONObject uploader(HttpServletRequest request, HttpServletResponse response) throws Exception {
         // TODO Auto-generated method stub

         /*
          *  头像上传路径和上传文件名
          */
         String path = null;
         String filename = null;
         /*
          *  设置上传位置
          *  Tomcat项目所在根目录
          */
         path = request.getSession().getServletContext().getRealPath("/uploads/");

         //  判断路径是否存在
         File file = new File(path);
         if (!file.exists()) {
             // 若不存在创建文件夹
             file.mkdirs();
         }
         /*
          *  解析request对象，获取上传文件项
          */
         DiskFileItemFactory factory = new DiskFileItemFactory();
         ServletFileUpload upload = new ServletFileUpload(factory);
         // 解析request
         List<FileItem> items = upload.parseRequest(request);
         // 遍历
         for (FileItem item : items) {
             // 进行判断，当前item对象是否是上传文件项
             if (item.isFormField()) {
                 // 说明是普通表单项

             } else {
                 // 说明上传文件项
                 // 获取上传文件的名称
                 filename = item.getName();
                 // 重命名文件，把文件的名称设置成唯一值
                 String uuid = UUID.randomUUID().toString().replace("-", "");
                 filename = uuid + "_" + filename;
                 // 把文件写入上传位置，完成文件上传
                 item.write(new File(path, filename));
                 // 删除临时文件
                  item.delete();
             }
         }

         /*
          * 返回Json数据
          */
         String pathandfilename = path +filename;
         JSONObject json =new JSONObject();
         json.put("path", pathandfilename);
         return json;

     }
 }

注意：请求成功后要响应一个上传位置的json数据，这段数据要放到前端注册页面的隐藏域的value值中，最后提交注册的时候一并写入数据库。

六、前端添加隐藏域

 <input type="hidden" id="avatar" name="avatar" value="" >

这段隐藏域只要在你的form表单中即可

七、通过js代码修改隐藏域value的值

注：添加一个response参数，这个是保存了返回的数据，注意是你的隐藏域name值，修改的时候注意查看。

到此为止头像的异步上传基本思路和代码就是这样了，当然这其中一定会遇到各种bug，耐心查错。控制器里需要各种jar包，有时候版本过高也会带来错误也要注意版本问题。