[整理]WebUploader + SpringMVC 实现多文件断点续传之一 多文件上传
2017-11-21 17:10
741 查看
PM要做一个文件上传的Web需要支持大文件断点续传,调查了一下决定使用Baidu的WebUploader控件实现。
1、多图片上传
前端JSP
1、多图片上传
前端JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html style="height: 99%; width: 99.9%"> <head> <title>文件上传</title> <link rel="stylesheet" href="${ctx}/js/webuploader-0.1.5/webuploader.css" /> <script src="${ctx}/js/jquery-ui-1.11.1/jquery-ui.min.js"></script> <script src="${ctx}/js/webuploader-0.1.5/webuploader.js"></script> </head> <body class="div-form-container"> <table class="upload"> <tbody> <tr> <td height="200px"> <div id="uploader-container" style="width: 100%"> <div id="fileList" class="uploader-list"> </div> <div id="upInfo"></div> <div id="filePicker">选择文件</div> </div> </td> </tr> <tr> <td> <input type="button" class="btnSave" id="btnUpload" value="上传"/> <input type="button" class="btnSave" id="btnReset" value="重置"/> <input type="button" class="btnSave" value="取消" onclick="javascript:closeDialog();"/> </td> </tr> </tbody> </table> <script type="text/javascript"> $(function() { var $maxSingleSize = 10*1024*1024, // 单个文件最大10M $maxSize = 10081024*1024; // 所有文件最大100M var $list = $('#fileList'), uploader; // Web Uploader实例 // 初始化Web Uploader uploader = WebUploader.create({ auto : false, // 手动上传 swf : '${ctx}/js/webuploader-0.1.5/Uploader.swf', server : '${ctx}/fileUpload/upload', // 文件接收服务端 threads : 3, // 同时运行3个线程传输 duplicate : false, // 是否重复上传(单次选择同样的文件) fileNumLimit : 10, // 文件总数量 fileSingleSizeLimit : $maxSingleSize, // 单个文件大小限制 10M fileSizeLimit : $maxSize, // 文件总大小限制 100M pick : { id : '#filePicker', // 选择文件的按钮 multiple : true // 允许可以同时选择多个文件 }, compress : false, // 不压缩文件 accept : { extensions: "txt,gif,jpg,jpeg,bmp,png,zip,rar,war,pdf,cebx,doc,docx,ppt,pptx,xls,xlsx", mimeTypes: '.txt,.gif,.jpg,.jpeg,.bmp,.png,.zip,.rar,.war,.pdf,.cebx,.doc,.docx,.ppt,.pptx,.xls,.xlsx', } }); // 当有文件添加进来的时候 uploader.on('fileQueued', function(file) { var $li = $('<div id="' + file.id + '" class="file-item">' + '<span class="info">' + file.name + '</span>' + '<span class="state">等待上传</span>' + '</div>'); $list.append($li); }); // 上传中 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id); var $state = $li.find('span.state'); $state.html("<font color='#330033'>上传中...</font>"); }); // 文件上传成功 uploader.on('uploadSuccess', function(file, response) { var $li = $('#' + file.id); var $state = $li.find('span.state'); $state.html("<font color='green'>上传成功!</font>"); }); // 文件上传失败 uploader.on('uploadError', function(file, code) { var $li = $('#' + file.id); var $state = $li.find('span.state'); $state.html("<font color='red'>上传失败!</font>"); }); // 手动上传 $("#btnUpload").click(function() { // 执行上传操作 uploader.upload(); }); // 重置 $("#btnReset").click(function() { // 清空文件列表,重置上传控件 $list.html(''); uploader.reset(); }); }); </script> </body> </html>后端Controller
import java.io.File; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.apache.log4j.Logger; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; @Controller @RequestMapping(value = "/fileUpload") public class FileUploadController extends BaseController { /** 日志记录 */ private static Logger logger = Logger.getLogger(FileUploadController.class); /** * 保存上传文件 * * @Title: upload * @Description: 保存前端使用Webuploader未进行分片处理上传的文件 * @param request HttpServletRequest * @param response HttpServletResponse * @param session HttpSession */ @RequestMapping(value = "/upload") public void upload(HttpServletRequest request, HttpServletResponse response, HttpSession session) { // 获得文件保存目录 String savePath = ""; // 这里是你要保存文件的目录 // 转换请求对象得到文件对象 MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> files = Murequest.getFileMap(); String fileName; File tagetFile; // 获得文档保存目录 File dir = new File(savePath); if (!dir.exists()) { dir.mkdirs(); } // 保存文档 for (MultipartFile file : files.values()) { fileName = file.getOriginalFilename(); // 创建文件对象 tagetFile = new File(savePath + File.separator + fileName); // 目标文件创建 if (!tagetFile.exists()) { try { tagetFile.createNewFile(); } catch (IOException e) { logger.error("创建目标文件时出错:" + e.getMessage()); e.printStackTrace(); } } // 保存文件 try { file.transferTo(tagetFile); } catch (IllegalStateException e) { logger.error("复制时出错:" + e.getMessage()); e.printStackTrace(); } catch (IOException e) { logger.error("复制时出错:" + e.getMessage()); e.printStackTrace(); } } } }
相关文章推荐
- [整理]WebUploader + SpringMVC 实现多文件断点续传之二 多文件断点续传
- WebUploader+SpringMVC实现文件上传功能
- webuploader+springmvc实现多文件上传(html+js+css原创,后台代码借鉴)
- WebUploader+SpringMVC实现文件上传功能
- 使用WebUploader实现分片断点上传文件功能(二)
- Web大文件上传断点续传控件4升级日志-Xproer.HttpUploader4
- webuploader在springMVC+jquery+Java开发环境下的大文件分片上传
- webuploader+springmvc实现图片上传功能
- Spring Web mvc Maven实现文件上传
- Web大文件上传断点续传控件5发布-HttpUploader5
- webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码
- webuploader 实现文件断点续传
- springMVC+WebUploader实现多图片上传
- Spring Web mvc Maven实现文件上传
- webuploader+springMvc+JSP 多图上传实现
- 断点续传、大文件上传、秒传、webuploader
- 第十章:文件上传下载——深入浅出学Spring Web MVC
- spring mvc +uploadify2.1 实现文件上传
- springmvc + ajaxfileupload 实现异步上传文件(图片)
- springmvc+fileuploader上传报错 Could not instantiate bean class [org.springframework.web.multipart.Multi