话不多说直接上代码

 <%@ 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实现无刷新文件上传的更多相关文章

  1. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  2. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  3. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  4. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  5. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  6. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  7. ie8实现无刷新文件上传

    ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...

  8. PHP Ajax JavaScript 实现 无刷新附件上传

    普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...

  9. 基于jQuery Ajax实现无刷新文件上传

    最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadF ...

随机推荐

  1. OpenCV学习笔记(一)——OpenCV安装

    1.无脑安装以下安装文件 cn_visual_studio_2010_ultimate_x86_dvd_532347.iso 2.测试Hello OpenCV 文件→新建→项目 win32应用程序→下 ...

  2. hive查看建表语句

    查看hive建表语句:show create table tablename; 查看hive表结构:describe  tablename; 简写:desc tablename;

  3. Lua函数之一

    LUA函数之一 函数声明: function foo(arguments) statements end 1.函数调用 调用函数的时候,如果参数列表为空,必须使用()表明是函数调用,例如: os.da ...

  4. YTU 3003: 括号匹配(栈和队列)

    3003: 括号匹配(栈和队列) 时间限制: 1 Sec  内存限制: 128 MB 提交: 2  解决: 2 [提交][状态][讨论版] 题目描述 假设一个表达式中只允许包含三种括号:圆括号&quo ...

  5. 关系数据库 范式(NF: Normal Form) 说明

    关系数据库 范式(NF: Normal Form) 说明 数据库电话insertdelete存储oracle   目录(?)[+]   一.范式概述(NF:NormalForm) 数据库的设计范式是数 ...

  6. Double与BigDecimal 比较

    1] 精确的浮点运算: 在Java里面,有时候为了保证数值的准确性需要精确的数据,先提供一个例子就可以发现问题了: public class FloatNumberTester { public st ...

  7. 安装windows7导致Ubuntu启动项消失的问题的解决

    系统原来是Ubuntu14,前两天安装win7后,启动直接是win7.也就是Ubuntu的启动项消失了. 在windows下尝试非常多方法,都以失败告终,最后选择Ubuntu下boot-repair软 ...

  8. FZU2126:消除类游戏(DP)

    Problem Description S近期在玩一种游戏. 这样的游戏的规则是一个一个地往一个栈里放有颜色的球,当栈顶连续k个球颜色同样时.这k个球立马同一时候消失. 如今S已经往栈里放了n个球,他 ...

  9. 简单易懂的单元测试框架-gtest(二)

    简介     事件机制用于在案例运行前后添加一些操作(相当于挂钩函数).目前,gtest提供了三种等级的事件,分别: 全局级,所有案例执行的前后 TestSuite级,某一个案例集的前后 TestCa ...

  10. com.mysql.jdbc.connection和java.sql.connection的区别

    com.mysql.jdbc.Connection 是mysql自己的接口 针对于对mysql的出来,java.sql.Connection 这是一个公共的接口包括对mysql的支持oracle,sq ...