Spring 是什么呢?首先它是一个开源的项目,而且目前非常活跃;它是一个基于 IOC 和 AOP 的构架多层 j2ee 系统的框架,但它不强迫你必须在每一层 中必须使用 Spring,因为它模块化的很好,允许你根据自己的需要选择使用它的某一个模块;它实现了很优雅的 MVC,对不同的数据访问技术提供了统一的接口,采用 IOC 使得可以很容易的实现 bean 的装配,提供了简洁的 AOP 并据此实现 Transcation Managment,等等
本篇文章主要介绍了 spring MVC + bootstrap 实现文件上传示例(带进度条),非常具有使用价值,有需要的朋友可以了解一下。
最近学习了 bootstrap,有结合了 spring MVC 写了个文件上传的示例,留做笔记,废话不多说,直接上代码
监听器类 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;
- @Component
- public class FileUploadProgressListener implements ProgressListener{
- private HttpSession session;
- public void setSession(HttpSession session){
- this.session = session;
- Progress status = new Progress();
- session.setAttribute("status", status);
- }
- @Override
- public 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 {
- @Autowired private 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;
- }
- @Override
- public 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; //单位为KB
- if (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://www.phperz.com/article/17/1130/358148.html