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 ...
随机推荐
- 使用Metasploit绕过UAC的多种方法
一.用户帐户控制(UAC)简介 在本文中,我们将简要介绍一下用户帐户控制,即UAC.我们还将研究它如何潜在地保护免受恶意软件的攻击并忽略UAC提示可能给系统带来的一些问题. 1.什么是用户帐户控制 ...
- kubernetes 的pod控制器
转载于网络 pod是kubernetes的最小单元,自主式创建的pod删除就没有了,但是通过资源控制器创建的pod如果删除还会重建.pod控制器就是用于实现代替我们去管理pod的中间层,并帮我们确 ...
- Excel：公式中的这些特殊数字
19E+307 9E+307是科学计数法表示的一个数字,就简单理解成是Excel支持的一个很大的数字就可以了. 用法示例: =LOOKUP(9E+307,A:A) 根据LOOKUP函数的性质,提取A列 ...
- 20181105 Timer(慕课网)
定时任务调度 基于给定的时间点,给定的时间间隔或者给定的执行次数自动执行的任务 Java中的定时调度工具 Timer JDK提供,不许引入 功能简单,能用Timer尽量用 Quartz 需要引入 功能 ...
- 【转载】SQL注入原理讲解
这几篇文章讲的都很不错,我看了大概清除了sql注入是怎么一回事,打算细细研究一下这个知识,另写一篇博客: 原文地址:http://www.cnblogs.com/rush/archive/2011/1 ...
- IIS发布MVC出错
一个MVC网站在发布到IIS上时,出现了这个问题: 然后解决办法: 然后应用程序池那里,自己点右键添加一个 新建完应用池之后选中点高级设置 最后,添加网站,添加网站的时候应用程序池选择自己刚刚新建的那 ...
- CCNA学习与实验指南——第2章 网络互联和参考模型
大三下学期的这个时间段,不知道是不是社会就业的恐惧与自身前途的迷茫所带来的压力,身边的同学一个个的整天奔赴考研室学的好不努力,空荡荡的宿舍只剩我一人孑然聊聊甚是索然无味,亦或许是即将毕业的压力等接踵而 ...
- S折交叉验证(S-fold cross validation)
S折交叉验证(S-fold cross validation) 觉得有用的话,欢迎一起讨论相互学习~Follow Me 仅为个人观点,欢迎讨论 参考文献 https://blog.csdn.net/a ...
- vue.js react.js angular.js三者比较
react和vue有许多相似之处,他们都有:1.使用虚拟DOM2.提供了响应式(reactive)和组件化(composable)的视图组件3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管 ...
- Dubbo学习笔记9：Dubbo服务提供方启动流程源码分析
首先我们通过一个时序图,直观看下Dubbo服务提供方启动的流程: 在<Dubbo整体框架分析>一文中我们提到,服务提供方需要使用ServiceConfig API发布服务,具体是调用代码( ...