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

话不多说直接上代码

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <script type="text/javascript" src="../3rd/jquery-3.2.1.min.js"></script>

 <style type="text/css">

     .modelContent{

         width: 380px;

         height: 150px;

         margin: 100px 200px;

         background-color: #FFFFFF;

         z-index: 1050;

         position: absolute;

     }

     .hidden{

         display: none;

     }

    .content {

         position: relative;

         width: 350px;

         margin: 30px 20px;

 }  

 .txt {

     height: 22px;

     border: 1px solid #cdcdcd;

     width: 180px;

     vertical-align: middle;

     margin: 0;

     padding: 0

 }  

 .btn {

     border: 1px solid #CDCDCD;

     height: 24px;

     width: 70px;

     vertical-align: middle;

     margin: 0;

     padding: 0

 }  

 .file {

     position: absolute;

     top: 0;

     left: 190px;

     height: 24px;

     filter: alpha(opacity :   0);

     opacity: 0;

     width: 70px;

     vertical-align: middle;

     margin: 0;

     padding: 0

 }  

 .backdrop{

     position: fixed;

     z-index: 1040;

     background-color: #333;

     opacity: .5;

     width: 100%;

     height: 100%;

 }

 .header{

     padding: 15px;

     border-bottom: 1px solid #e5e5e5;

 }

 .close:focus, .close:hover {

     color: #000;

     text-decoration: none;

     cursor: pointer;

     opacity: .5;

 }

 .close{

     float: right;

     margin-top: -9px;

 }

 </style>

 </head>

 <body>

 <!-- 附于body之上的div -->

 <div class="hidden backdrop" id="backDiv"></div>

 <!-- 定义上传按钮 -->

 <button type="button" class="btn btn-default" title="导入" id="export">

 </button>

 <!-- 定义上传对话框 -->

 <div class="modelContent hidden" id="uploadDialog">

     <!-- 标题 -->

     <div class="header">

         <span class="close">x</span>

     </div>

     <!-- 内容 -->

     <div class="content">

         <input type="text" id="textfield" class="txt" disabled="disabled"/>

         <input type="button" class="btn" value="浏览..." />

         <input  type="file" name="file" class="file" id="file" multiple/>

 <!--         onchange="document.getElementById('textfield').value=this.value"   -->

         <input type="submit" id="submit" class="btn" value="上传"/>

     </div>

     <!-- 上传进度条 -->

     <div class="hidden" id="progressDiv" style="margin: 0px 15px;">

         <progress id="progressbar" value="0" max="100" style="width: 308px;">

         </progress>

         <span id="percentage" style="color: blue;"></span>

     </div>

 </div>

 </body>

 <script type="text/javascript">

 $(function(){

     $("#export").click(function(){

         $("#uploadDialog,#backDiv").removeClass("hidden");

         $("body").css("background-color","#fff");

     });

     //将选择的文件写到text中

     $("#file").change(function(e){

         var nameArray = [];

         var files = $("#file")[0].files;

         $.each(files,function(index,val){

             nameArray.push(val.name);

         });

         $("#textfield").val(nameArray.join());

     })

     //关闭上传对话框

     $(".close").click(function(e){

         $("#uploadDialog,#backDiv").addClass("hidden");

         $("#textfield").val("");

     });

     //点击上传，由于非form表单上传，因此采用

     $("#submit").click(function(e){

         //显示进度条

         $("#progressDiv").show();

         //获取上传文件

         var fileObj = $("#file")[0].files[0];

         console.log(fileObj);

         //使用formdata实现无刷新上传

         var formData = new FormData();

         formData.append("file",fileObj);

         //后台使用springmvc接收请求

         var url = "http://localhost:8080/SpringMVCTest/index/fileUpload";

         //ajax

         var xhr = new XMLHttpRequest();

         xhr.open("POST",url,true);

         //定义上传对象的进度事件

         xhr.upload.onprogress=function(event){

          var progressBar = document.getElementById("progressbar") ;

          var percentageDiv = document.getElementById("percentage");

          if (event.lengthComputable) {

              progressBar.max = event.total;

              progressBar.value = event.loaded;

              percentageDiv.innerHTML = Math.round(event.loaded / event.total * 100)+ "%";

             }

         };

 //         //当状态为4，

         xhr.onload = function(event){

             //获取相应的状态

             var data = xhr.responseText;

             //关闭进度条，并显示上传成功状态

 //             $("#progressDiv").addClass("hidden");

             //

         };

         xhr.send(formData);

     });

 })

 </script>

 </html>

几点提示：

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

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

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

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

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

         <property name="defaultEncoding" value="UTF-8"></property>

         <property name="maxUploadSize" value="10485760000"></property>

         <property name="maxInMemorySize" value="10240000"></property>

     </bean>

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

 package com.yongcheng.liuyang.listener;

 import javax.servlet.http.HttpSession;

 import org.apache.commons.fileupload.ProgressListener;

 import org.springframework.stereotype.Component;

 import com.yongcheng.liuyang.model.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);

     }

     public void update(long pBytesRead, long pContentLength, int pItems) {

         Progress status = (Progress) session.getAttribute("status");

         try {

             Thread.sleep(5);

         } catch (InterruptedException e) {

             e.printStackTrace();

         }

         status.setpBytesRead(pBytesRead);

         status.setpContentLength(pContentLength);

         status.setpItems(pItems);  

     }  

 }

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

 package com.yongcheng.liuyang.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;

         }  

         @Override

         @SuppressWarnings("unchecked")

         public MultipartParsingResult parseRequest(HttpServletRequest request)

                 throws MultipartException {

             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 ex) {

                 throw new MultipartException("Could not parse multipart servlet request", ex);

             }

         }

 }

如有问题，欢迎评论留言，共同进步！！

js+ajax+springmvc实现无刷新文件上传的更多相关文章

SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
【JS】ajax 实现无刷新文件上传
一.摘要最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
使用PHP和HTML5 FormData实现无刷新文件上传教程
无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...
Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...
实用ExtJS教程100例-009：ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
ie8实现无刷新文件上传
ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...
PHP Ajax JavaScript 实现无刷新附件上传
普通表单前端页面后台处理带有文件的表单刷新方式前端界面后台页面无刷新方式大文件上传 POST极值 upload极值上传细节前端页面后台处理总结对一个网站而言,有一个基本的不可 ...
基于jQuery Ajax实现无刷新文件上传
最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadF ...

随机推荐

MT【164】条件化简
(2017北大优特测试第9题) 已知实数 \(a_i\)(\(i=1,2,3,4,5\))满足 \((a_1-a_2)^2+(a_2-a_3)^2+(a_3-a_4)^2+(a_4-a_5)^2=1\ ...
from表单文件上传后页面跳转解决办法
from表单上传文件,路径跳转后,又不能转发回来. 本人的一个解决办法是.返回一段html代码,浏览器解析后后退一步,回到原来的页面并刷新. return "<html>< ...
openstack项目【day23】：虚拟化介绍
本节内容一什么是虚拟化二为何要学习虚拟化三虚拟化技术主要分类(了解) 四平台虚拟化技术又可以细分(了解) 一什么是虚拟化虚拟化说白了就是本来是一个完整的资源,切分或者说虚拟成多份,让 ...
Java URL
1.在网络编程的时候,一定不要忘记 <uses-permission android:name="android.permission.INTERNET"></u ...
linux下c语言实现双进程运行
题目编写一个Linux C程序,在主进程中创建一个子进程,子进程中死循环输出“Hello CSU”字符串,主进程休眠10s后,向子进程发送信号结束子进程,随后主进程退出.(用信号实现进程间的通信,k ...
bzoj千题计划208：bzoj3174: [Tjoi2013]拯救小矮人
http://www.lydsy.com/JudgeOnline/problem.php?id=3174 按a+b从小到大排序,a+b小的在上面,先考虑让它逃出去正确性不会证感性理解一下,最后一个 ...
Docker 入门第二部分：容器
目录 Docker 入门第二部分: 容器先决条件介绍你的新开发环境使用 Dockerfile 定义一个容器 Dockerfile 应用本身 requirements.txt app.py 构 ...
概率dp（A - Scout YYF I POJ - 3744 ）
题目链接:https://cn.vjudge.net/contest/276241#problem/A 题目大意:首先输入n和p,n代表地雷的个数,p代表走一步的概率,1-p代表走两步的概率,然后问你 ...
编写灵活、稳定、高质量的 HTML 代码的规范
不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. 语法用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格 ...
if 语句写了return 报错

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

js+ajax+springmvc实现无刷新文件上传的更多相关文章

随机推荐

热门专题