spring MVC + bootstrap实现文件上传（带进度条）

监听器类FileUploadProgressListener.java

package com.gpl.web.listener;import javax.servlet.http.HttpSession;import org.apache.commons.fileupload.ProgressListener;import org.springframework.stereotype.Component;import com.gpl.web.utils.Progress;@Componentpublic class FileUploadProgressListener implements ProgressListener{private HttpSession session;public void setSession(HttpSession session){this.session = session;Progress status = new Progress();session.setAttribute("status", status);}@Overridepublic void update(long bytesRead, long contentLength, int items) {Progress status = (Progress) session.getAttribute("status");status.setBytesRead(bytesRead);status.setContentLength(contentLength);status.setItems(items);}}

CustomerMyltipartResolver.java

package com.gpl.web.listener;import java.util.List;import javax.servlet.http.HttpServletRequest;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileUpload;import org.apache.commons.fileupload.FileUploadBase;import org.apache.commons.fileupload.FileUploadException;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.multipart.MaxUploadSizeExceededException;import org.springframework.web.multipart.MultipartException;import org.springframework.web.multipart.commons.CommonsMultipartResolver;public class CustomMultipartResolver extends CommonsMultipartResolver{@Autowiredprivate FileUploadProgressListener progressListener;public void setFileUploadProgressListener(FileUploadProgressListener progressListener){this.progressListener = progressListener;}public MultipartParsingResult parsingResult(HttpServletRequest request){String encoding = determineEncoding(request);FileUpload fileUpload = prepareFileUpload(encoding);progressListener.setSession(request.getSession());fileUpload.setProgressListener(progressListener);try{List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);return parseFileItems(fileItems, encoding);}catch(FileUploadBase.SizeLimitExceededException ex){throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);}catch (FileUploadException e) {throw new MultipartException("异常",e);}}}

进度实体类Progress.java

package com.gpl.web.utils;public class Progress {private long bytesRead;private long contentLength;private long items;public long getBytesRead() {return bytesRead;}public void setBytesRead(long bytesRead) {this.bytesRead = bytesRead;}public long getContentLength() {return contentLength;}public void setContentLength(long contentLength) {this.contentLength = contentLength;}public long getItems() {return items;}public void setItems(long items) {this.items = items;}@Overridepublic String toString() {return "Progress [bytesRead=" + bytesRead + ", contentLength=" + contentLength + ", items=" + items + "]";}}

spring配置文件需加入如下bean

<!-- 文件上传 --><bean id="multipartResolver" class="com.gpl.web.listener.CustomMultipartResolver"><property name="defaultEncoding" value="utf-8"></property><property name="maxUploadSize" value="838860800"></property></bean>

controller层实现

/** * 文件上传 * @param request * @param response * @param file * @throws IOException */@RequestMapping(value = "/upload", method = RequestMethod.POST)public void upload(HttpServletRequest request,HttpServletResponse response,@RequestParam("file") CommonsMultipartFile file){try{PrintWriter out;boolean flag = false;if(file.getSize() > 0){String path = "/asserts/upload/files/excel/";String uploadPath = request.getSession().getServletContext().getRealPath(path);System.out.println(uploadPath);FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath,file.getOriginalFilename()));flag = true;}out = response.getWriter();if(flag == true){out.print("1");}else{out.print("2");}}catch(Exception e){e.printStackTrace();}}

前端代码

<div id="uploadFileDlg" class="easyui-dialog" style="width:800px;text-align:center;"closed="true"><form id="uploadFileForm" method="post" style="width:100%;text-align:center;padding:20px 0;"><input id="file" type="file" style="width:500px;display:inline-block;"><button id="uploadBtn" class="easyui-linkButton" style="width:auto;display:inline-block;">上传</button> </form><div class="progress progress-bar-striped active" style="display:none;"><div id="progressBar" class="progress-bar progress-bar-info" role="progressbar"aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"style="width:0%;"></div></div><table id="uploadBatchDg"></table></div>

页面ready加入的js代码

$("#uploadBtn").attr("disabled",false);$("#uploadBtn").click(function(){var fileValue = $("#file").val();if(fileValue == null || fileValue == ""){layer.msg("请先选择文件");return;}var obj = $("#file");var photoExt=obj.val().substr(obj.val().lastIndexOf(".")).toLowerCase();//获得文件后缀名if(photoExt!=".xls" && photoExt!=".xlsx"){layer.msg("请选择xls或是xlsx格式的文件，不支持其他格式文件");return false;}var fileSize = 0;var isIE = /msie/i.test(navigator.userAgent) && !window.opera;      if (isIE && !obj.files) {     var filePath = obj.val();      var fileSystem = new ActiveXObject("Scripting.FileSystemObject");  var file = fileSystem.GetFile (filePath);        fileSize = file.Size;     }else { fileSize = obj.get(0).files[0].size;   } fileSize=Math.round(fileSize/1024*100)/100; //单位为KBif(fileSize > 5000){layer.msg("文件不能大于5M");return false;}$("#progressBar").width("0%");$(this).attr("disabled",true);$("#progressBar").parent().show();$("#progressBar").parent().addClass("active");uploadFile();

上传文件js代码

function uploadFile() {        var fileObj = $("#file").get(0).files[0]; // js 获取文件对象        console.info("上传的文件："+fileObj);        var FileController = "${basePath}/batch/upload"; // 接收上传文件的后台地址         // FormData 对象        var form = new FormData();        // form.append("author", "hooyes"); // 可以增加表单数据        form.append("file", fileObj); // 文件对象        // XMLHttpRequest 对象        var xhr = new XMLHttpRequest();        xhr.open("post", FileController, true);        xhr.onload = function() {            layer.msg("上传完成");            $("#uploadBtn").attr('disabled', false);            $("#uploadBtn").val("上传");            $("#progressBar").parent().removeClass("active");            $("#progressBar").parent().hide();        };        xhr.upload.addEventListener("progress", progressFunction, false);        xhr.send(form);    }     function progressFunction(evt) {        var progressBar = $("#progressBar");        if (evt.lengthComputable) {            var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%";            progressBar.width(completePercent);            $("#uploadBtn").val("正在上传 " + completePercent);        }    };

效果图

参考出处：

http://blog.csdn.net/zmx729618/article/details/51881084