js+ajax+springmvc实现无刷新文件上传

Posted 倾慕已久

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js+ajax+springmvc实现无刷新文件上传相关的知识,希望对你有一定的参考价值。

话不多说直接上代码

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4 <html>
  5 <head>
  6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7 <script type="text/javascript" src="../3rd/jquery-3.2.1.min.js"></script>
  8 
  9 <style type="text/css">
 10     
 11     .modelContent{
 12         width: 380px;
 13         height: 150px;
 14         margin: 100px 200px;
 15         background-color: #FFFFFF;
 16         z-index: 1050;
 17         position: absolute;
 18         
 19     }
 20     
 21     .hidden{
 22         display: none;
 23     }
 24     
 25    .content {  
 26         position: relative;  
 27         width: 350px;
 28         margin: 30px 20px;
 29         
 30 }  
 31   
 32 .txt {  
 33     height: 22px;  
 34     border: 1px solid #cdcdcd;  
 35     width: 180px;  
 36     vertical-align: middle;  
 37     margin: 0;  
 38     padding: 0  
 39 }  
 40   
 41 .btn {  
 42     border: 1px solid #CDCDCD;  
 43     height: 24px;  
 44     width: 70px;  
 45     vertical-align: middle;  
 46     margin: 0;  
 47     padding: 0  
 48 }  
 49   
 50 .file {  
 51     position: absolute;  
 52     top: 0;  
 53     left: 190px;  
 54     height: 24px;  
 55     filter: alpha(opacity :   0);  
 56     opacity: 0;  
 57     width: 70px;  
 58     vertical-align: middle;  
 59     margin: 0;  
 60     padding: 0  
 61 }  
 62 
 63 .backdrop{
 64     position: fixed;
 65     z-index: 1040;
 66     background-color: #333;
 67     opacity: .5;
 68     width: 100%;
 69     height: 100%;
 70 }
 71 
 72 .header{
 73     padding: 15px;
 74     border-bottom: 1px solid #e5e5e5;
 75 }
 76 
 77 .close:focus, .close:hover {
 78     color: #000;
 79     text-decoration: none;
 80     cursor: pointer;
 81     opacity: .5;
 82 }
 83 
 84 .close{
 85     float: right;
 86     margin-top: -9px;
 87 }
 88 
 89 </style>
 90 </head>
 91 
 92 <body>
 93 <!-- 附于body之上的div -->
 94 <div class="hidden backdrop" id="backDiv"></div>
 95 
 96 <!-- 定义上传按钮 -->
 97 <button type="button" class="btn btn-default" title="导入" id="export">
 98 </button>
 99 
100 <!-- 定义上传对话框 -->
101 <div class="modelContent hidden" id="uploadDialog">
102     <!-- 标题 -->
103     <div class="header">
104         <span class="close">x</span>
105     </div>
106     <!-- 内容 -->
107     <div class="content">
108         <input type="text" id="textfield" class="txt" disabled="disabled"/>  
109         <input type="button" class="btn" value="浏览..." /> 
110         <input  type="file" name="file" class="file" id="file" multiple/>
111 <!--         onchange="document.getElementById(‘textfield‘).value=this.value"   -->
112         <input type="submit" id="submit" class="btn" value="上传"/>  
113     </div>
114     <!-- 上传进度条 -->
115     <div class="hidden" id="progressDiv" style="margin: 0px 15px;">
116         <progress id="progressbar" value="0" max="100" style="width: 308px;">
117         </progress>
118         <span id="percentage" style="color: blue;"></span>
119     </div>
120 </div>
121 </body>
122 
123 <script type="text/javascript">
124 $(function(){
125     $("#export").click(function(){
126         $("#uploadDialog,#backDiv").removeClass("hidden");
127         $("body").css("background-color","#fff");
128     });
129     
130     //将选择的文件写到text中
131     $("#file").change(function(e){
132         var nameArray = [];
133         var files = $("#file")[0].files;
134         $.each(files,function(index,val){
135             nameArray.push(val.name);
136         });
137         $("#textfield").val(nameArray.join());
138     })
139     
140     //关闭上传对话框
141     $(".close").click(function(e){
142         $("#uploadDialog,#backDiv").addClass("hidden");
143         $("#textfield").val("");
144     });
145     
146     //点击上传,由于非form表单上传,因此采用
147     $("#submit").click(function(e){
148         //显示进度条
149         $("#progressDiv").show();
150         //获取上传文件
151         var fileObj = $("#file")[0].files[0];
152         console.log(fileObj);
153         //使用formdata实现无刷新上传
154         var formData = new FormData();
155         formData.append("file",fileObj);
156         //后台使用springmvc接收请求
157         var url = "http://localhost:8080/SpringMVCTest/index/fileUpload";
158         //ajax
159         var xhr = new XMLHttpRequest();
160         xhr.open("POST",url,true);
161         //定义上传对象的进度事件
162         xhr.upload.onprogress=function(event){
163          var progressBar = document.getElementById("progressbar") ;
164          var percentageDiv = document.getElementById("percentage");
165          if (event.lengthComputable) {
166              progressBar.max = event.total;  
167              progressBar.value = event.loaded;  
168              percentageDiv.innerHTML = Math.round(event.loaded / event.total * 100)+ "%";  
169             }  
170         };
171         
172 //         //当状态为4,
173         xhr.onload = function(event){
174             //获取相应的状态
175             var data = xhr.responseText;
176             //关闭进度条,并显示上传成功状态
177 //             $("#progressDiv").addClass("hidden");
178             //
179         };
180         xhr.send(formData);
181     });
182 })
183 </script>
184 </html>

 几点提示:

 1. 模态框的处理中必须增加一个影藏的div,设置其高、宽均为100%,当模态框显示时只需要其z-index的值大于背景div即可。

 2. post的请求体必须使用FormData来传递,否则后台无法接受到文件信息。

后台处理使用springmvc,务必注意以下几点,

 1. 在spring-mvc.xml中配置CommonsMultipartResolver的mutipart解析类

技术分享图片
1 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
2         <property name="defaultEncoding" value="UTF-8"></property>
3         <property name="maxUploadSize" value="10485760000"></property>
4         <property name="maxInMemorySize" value="10240000"></property>
5     </bean>
View Code

 2. 如果需要进度条显示,则需要实现进度监听类ProgressListener

技术分享图片
 1 package com.yongcheng.liuyang.listener;
 2 
 3 import javax.servlet.http.HttpSession;  
 4 import org.apache.commons.fileupload.ProgressListener;  
 5 import org.springframework.stereotype.Component;
 6 
 7 import com.yongcheng.liuyang.model.Progress;  
 8   
 9 @Component
10 public class FileUploadProgressListener implements ProgressListener {  
11     private HttpSession session;  
12     public void setSession(HttpSession session){  
13         this.session=session;  
14         Progress status = new Progress();//保存上传状态  
15         session.setAttribute("status", status);  
16     }  
17     public void update(long pBytesRead, long pContentLength, int pItems) {  
18         Progress status = (Progress) session.getAttribute("status");  
19         try {  
20             Thread.sleep(5);  
21         } catch (InterruptedException e) {  
22             e.printStackTrace();  
23         }  
24         status.setpBytesRead(pBytesRead);  
25         status.setpContentLength(pContentLength);  
26         status.setpItems(pItems);  
27           
28     }  
29     
30 }
View Code

3. 如果实现了进度监听接口,则需要将进度信息写到文件的解析类中,因此必须继承CommonsMultipartResolver,覆写parseRequest方法

技术分享图片
 1 package com.yongcheng.liuyang.listener;
 2 
 3 import java.util.List;
 4 
 5 import javax.servlet.http.HttpServletRequest;
 6 
 7 import org.apache.commons.fileupload.FileItem;
 8 import org.apache.commons.fileupload.FileUpload;
 9 import org.apache.commons.fileupload.FileUploadBase;
10 import org.apache.commons.fileupload.FileUploadException;
11 import org.apache.commons.fileupload.servlet.ServletFileUpload;
12 import org.springframework.beans.factory.annotation.Autowired;
13 import org.springframework.web.multipart.MaxUploadSizeExceededException;
14 import org.springframework.web.multipart.MultipartException;
15 import org.springframework.web.multipart.commons.CommonsMultipartResolver;
16 
17 public class CustomMultipartResolver extends CommonsMultipartResolver {
18 
19      @Autowired  
20         private FileUploadProgressListener progressListener;  
21       
22         public void setFileUploadProgressListener(  
23                 FileUploadProgressListener progressListener) {  
24             this.progressListener = progressListener;  
25         }  
26           
27         @Override  
28         @SuppressWarnings("unchecked")  
29         public MultipartParsingResult parseRequest(HttpServletRequest request)  
30                 throws MultipartException {  
31             String encoding = determineEncoding(request);  
32             FileUpload fileUpload = prepareFileUpload(encoding);  
33             progressListener.setSession(request.getSession());  
34             fileUpload.setProgressListener(progressListener);  
35             try {  
36                 List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);  
37                 return parseFileItems(fileItems, encoding);  
38             }  
39             catch (FileUploadBase.SizeLimitExceededException ex) {  
40                 throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);  
41             }  
42             catch (FileUploadException ex) {  
43                 throw new MultipartException("Could not parse multipart servlet request", ex);  
44             }  
45         }  
46 }
View Code

 

                                                                                                                             如有问题,欢迎评论留言,共同进步!!

 

以上是关于js+ajax+springmvc实现无刷新文件上传的主要内容,如果未能解决你的问题,请参考以下文章

js实现无刷新表单提交文件,将ajax请求转换为form请求方法

js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

通过Ajax实现无刷新分页

Ajax.BeginForm()实现ajax无刷新提交

如何实现不刷新页面,只重新加载js文件?

ie8实现ajax无刷新文件上传