利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
采用大文件分片并发上传，极大的提高了文件上传效率。
Tip:底部附完整demo源码地址链接
详细前端demo源码部分(复制粘贴可直接使用)
HTML 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>WebUploader示例</title> <link href="http://www.likecs.com/webuploader.css"> <link href="http://www.likecs.com/style.css"> </head> <body> <div> <div> <div>选择图片</div> <button> 确认上传 </button> </div> <ul> <!-- 各种状态图片示例部分 --> <li> <div>等待上传</div> <span>×</span> <img src="http://avatars0.githubusercontent.com/u/42485491?s=60&v=4" alt="图片"> <p>xxxxxxxxxxxxxxxxxx.png</p> </li> <li> <div>上传出错</div> <span>×</span> <img src="http://avatars0.githubusercontent.com/u/42485491?s=60&v=4" alt="图片"> <p>xxxxxx.png</p> </li> <li> <div>上传成功</div> <span>×</span> <img src="http://avatars0.githubusercontent.com/u/42485491?s=60&v=4" alt="图片"> <p>xxxxxx.png</p> </li> <li> <div>上传中</div> <span>×</span> <img src="http://avatars0.githubusercontent.com/u/42485491?s=60&v=4" alt="图片"> <p>xxxxxx.png</p> </li> </ul> </div> <!-- 引入jQuery --> <script src="http://www.likecs.com/js/jquery.min.js"></script> <!-- 引入Webuploader --> <script src="http://www.likecs.com/js/webuploader.js"></script> <!-- 引入上传图片的js片段 --> <script src="http://www.likecs.com/js/upload.js"></script> </body> </html> JS部分 upload.js $(function () { var baseUrl="http://localhost:8080/Test/"; /** * 创建的WebUploadr对象 */ var imageUploader = WebUploader.create({ // 是否开起分片上传。 chunked: false, //选择完文件或是否自动上传 auto: false, //swf文件路径 swf: 'Uploader.swf', // 上传并发数。允许同时最大上传进程数[默认值：3] 即上传文件数 threads: 3, //文件接收服务端接口 server: baseUrl + "file/save", // 选择文件的按钮 pick: '#imagePicker', //上传请求的方法 method: "POST", // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false, //指定接受哪些类型的文件 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); /** * 文件被添加进队列的时候 */ imageUploader.on('fileQueued', function (file) { var $list = $('#imagesList'); var $li = $(' <li>'+ '<div class= "wait state">等待上传</div>'+ '<span>×</span>'+ '<img src="" alt="图片">'+ '<p>'+file.name+'</p>'+ '</li>'), $img = $li.find('img'); $list.append($li); //创建图片预览 imageUploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>不支持格式,不能预览</span>'); return; } $img.attr('src', src); }); }); //移除选择的图片 $('#imagesList').on('click', '.delete', function () { var fileId = $(this).parents('li').attr('id'); if (confirm("确认移除次图片吗?")) { // 从上传队列中移除 imageUploader.removeFile(fileId, true); // 从视图中移除缩略图 $(this).parents('li').remove(); } }); // 文件上传过程中创建进度条实时显示。 imageUploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $progress = $li.find('div.progress'); // 避免重复创建 if (!$progress.length) { $li.children('div.state').remove(); $progress = $('<div></div>').appendTo($li); } $progress.text('上传中'); }); // 文件上传成功处理。 imageUploader.on('uploadSuccess', function (file, response) { var $li = $('#' + file.id), $success = $li.find('div.success'); // 避免重复创建 if (!$success.length) { $li.children('div.state').remove(); $success = $('<div></div>').appendTo($li); } $success.text('上传成功'); }); //上传出错 imageUploader.on('uploadError', function (file) { var $li = $('#' + file.id), $error = $li.find('div.error'); // 避免重复创建 if (!$error.length) { // 移除原来的 $li.children('div.state').remove(); // 创建新的状态进度条 $error = $('<div></div>').appendTo($li); } $error.text('上传出错'); }); /** * 确认上传 */ $("#sureUpload").on('click', function () { imageUploader.upload(); }) }) Spring MVC部分 /** * 保存文件file/image * @param request * @return */ @RequestMapping(value = "save",method = RequestMethod.POST,produces = "application/json;charset=utf-8") @ResponseBody public String saveFile(HttpServletRequest request){ //获取项目根路径(web.xml中需先设置才能使用这个获取项目路径) String rootpath=System.getProperty("rootpath"); MultipartHttpServletRequest req= (MultipartHttpServletRequest) request; MultipartFile multipartFile=req.getFile("file"); //保存路径 String realPath=rootpath+"../upload/images"; //获取上传的源文件名 String filename = multipartFile.getOriginalFilename(); //文件类型(.xxxx) String contentType=filename.substring(filename.lastIndexOf(".")); try{ //判断文件夹是否存在 File dir=new File(realPath); // 不存在则创建 if(!dir.exists()){ dir.mkdirs(); } //保存图片 File file = new File(realPath, filename); //写出文件 multipartFile.transferTo(file); }catch (Exception e){ e.printStackTrace(); } return "success"; } 样式部分 webuploader.css .webuploader-container { position: relative; } .webuploader-element-invisible { position: absolute !important; width: 100%; display: block; height: 100%; opacity: 0; } /* 所见上传按钮效果关键样式部分 */ .webuploader-pick { position: relative; display: inline-block; cursor: pointer; background: #00b7ee; padding: 9px 20px; color: #fff; text-align: center; border-radius: 3px; overflow: hidden; } .webuploader-pick-hover { background: #00a2d4; } .webuploader-pick-disable { opacity: 0.6; pointer-events:none; } style.css * { margin: 0; padding: 0; } li { list-style: none; } /* 图片上传区域 */ #uploadArea { width: 888px; } /* 承载Webuploader按钮的标签 */ #imagePicker { display: block; margin: 6px; } #imagesList { position: relative; overflow: hidden; } #imagesList li { display: block; position: relative; width: 110px; height: 140px; margin: 10px; float: left; } /* 确认上传按钮 */ #sureUpload { margin: 6px; height: 38px; padding: 0 20px; display: block; color: #fff; text-align: center; cursor: pointer; background-color: rgba(76, 175, 80, .9); border: none; } /* 图片删除按钮 */ #imagesList li span.delete { z-index: 10; width: 18px; height: 18px; background-color: red; display: block; border-radius: 50%; text-align: center; line-height: 18px; color: #fff; cursor: pointer; position: absolute; right: -4px; top: -10px; } /* 预览图片大小 */ #imagesList li img { width: 100%; } /* 文件名 */ #imagesList li p.filename { text-align: center; /* 多的内容换行 */ /* word-wrap: break-word; word-break: break-all; */ /* 多的部分截断 用...代替*/ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* 上传进度条状态样式 */ .wait, .error, .success, .progress { width: 100%; text-align: center; font-weight: bold; position: absolute; top: -1px; left: 0; } /* 等待上传 */ .wait { background-color: rgba(158, 158, 158, .5); } /* 上传出错 */ .error { background-color: rgba(255, 0, 0, .5); color: #fff; } /* 上传成功 */ .success { background-color: rgba(76, 175, 80, .9); color: #fff; } /* 上传中 */ .progress { background-color: rgba(255, 235, 59, .7); color: #fff; }