Ajax上传文件并显示进度条
1、第一种：创建一个springboot的项目。
1、 打开创建页面 选择File-new-project..
2、选择创建的项目为spring initializr 进入springboot项目创建步骤（也可以选择类型java，创建一个普通java项目）
3、输入项目名字，选择依赖web（根据项目需求选择，此次需要），选择存放目录-完成（Finish）
4、在pom.xml中引入html以依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、第二种：创建一个简单的javaweb项目。
1、创建一个基本的javaweb项目
2、集成springmvc开发环境
1、第一步：实现思路。
1、借助于springboot的框架（springboot集成springmvc），实现上传的后天功能。将文件上传到D:\img下
2、前端借助于原生js实现对上传请求的监控获得上传进度，请求完成的情况下
2、第二步：编写controller
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.FileOutputStream;
//访问地址：http://localhost:8080/toAsyn
@Controller
public class UploadController {
// 跳转到上传文件的页面
@RequestMapping(value = "/toAsyn", method = RequestMethod.GET)
public String toAsyn() {
// 跳转到 templates 目录下的 uploadimg.html
return "asyn";
}
// 处理文件上传
@ResponseBody
@RequestMapping(value = "/testuploadimg", method = RequestMethod.POST)
public String uploadImg(@RequestParam("file") MultipartFile file,
HttpServletRequest request) {
String contentType = file.getContentType();
String fileName = file.getOriginalFilename();
String filePath = "d:/img/";
if (file.isEmpty()) {
return "文件为空！";
}
try {
uploadFile(file.getBytes(), filePath, fileName);
} catch (Exception e) {
// TODO: handle exception
}
// 返回json
return "succes";
}
private void uploadFile(byte[] file, String filePath, String fileName)
throws Exception {
File targetFile = new File(filePath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(filePath + fileName);
out.write(file);
out.flush();
out.close();
}
}
3、第三步:设置文件最大上传限制。
1、新建application.yml
放到前项目下的：src\main\resources\application.yml
2、添加内容：
spring:
servlet:
multipart:
max-file-size: 120MB
max-request-size: 120MB
3：否则上传文件超过10485760 字节就会报错
the request was rejected because its size (64050422) exceeds the configured maximum (10485760)
4、第四步：编写前端代码。
1、路径在 当前项目的：src\main\resources\asyn.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传进度条</title>
</head>
<body>
<div align="center">
<input type="file" id="pic" name="pic"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
</div>
<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
<table width="300" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td align="center" id="progressPersent">0%</td>
</tr>
<tr>
<td>
<!-- 黑色边框部分 -->
<table width="100%" border="1" cellspacing="0" cellpadding="0"
bordercolor="#000000">
<tr>
<td>
<!-- 红色部分 -->
<table width="1%" border="0" cellspacing="0" cellpadding="0"
bgcolor="#FF0000" id="progress">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" id="complete">completed</td>
</tr>
</table>
</div>
<script>
var xhr = new XMLHttpRequest();
//上传失败
function uploadFailed(evt) {
document.getElementById("progressBar").style.visibility="hidden";
document.getElementById("complete").innerText ="上传异常！" ;
}
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
document.getElementById("progressBar").style.visibility="visible";
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
//document.getElementById("son").innerHTML =per +"%" ;
document.getElementById("progressPersent").innerText =per +"%" ;
document.getElementById("progress").style.width =per +"%" ;
}
//上传文件
function uploadFile() {
//将上传的多个文件放入formData中
var picFileList = document.getElementById("pic").files;
var formData = new FormData();
formData.append("file" , picFileList[0] );
//监听事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
xhr.open("POST", "testuploadimg",true);
//记得加入上传数据formData
xhr.send(formData);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(xhr.responseText == "succes"){
document.getElementById("progress").style.width ="100%" ;
document.getElementById("progressPersent").innerText ="100%" ;
document.getElementById("complete").innerText ="上传成功！" ;
}else{
document.getElementById("complete").innerText ="上传失败！" ;
}
}
}
}
</script>
</body>
</html>
1、第一步：测试。
1、为了测试上传进度效果此次测试文件大小为61MB
2、启动服务进入：http://localhost:8080/toAsyn
3、选择文件上传，测试成功，如下所示：
2、第二步：总结。
1、非IE一般使用XMLHttpRequest，IE使用ActiveXObject
var xmlHttp = null;
//如果支持XMLHttpRequest则使用
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
//如果是IE浏览器则需要使用
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
2、IE并不支持FormData对象
var formData = new FormData();
3、如果需要兼容ie需要解决以上两个问题