本项目是基于springmvc框架开发，使用了jQuery fileUpload插件来实现ajax文件上传带进度条的功能，请在ssm框架的基础上按照本教程操作，ssm如何整合这里就不解释了，项目中涉及到的js,css文件在项目demo源码中，项目源码下载地址：http://pan.baidu.com/s/1slQ0Z9r。
先看看上传文件时带进度条的效果，如图所示。
ajax文件上传成功之后，会提示xxx文件上传成功。
如果你的文件格式不正确，就会提示你的文件格式错误，如图。
![0947P3U~GM}8(2)[M[]BJAS.png](/uploads/20170222/1487778284244780.png "1487778284244780.png")
1.下面开始来实现ajax文件上传带进度条的功能，先写ajaxUpload.jsp前端页面，代码如下。
<%@ 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">
<link rel="stylesheet" type="text/css" href="lib/jquery.fileupload/css/jquery.fileupload.css">
<link rel="stylesheet" type="text/css" href="lib/jquery.fileupload/css/H-ui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.fileupload/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="lib/jquery.fileupload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="lib/jquery.fileupload/js/jquery.fileupload.js"></script>
<style type="text/css">
</style>
<title>ajax文件上传进度条</title>
<script type="text/javascript">
$(function(){
//支持的文件类型正则表达式
var fileType = /\.(doc?x|xls?x|ppt?x|txt|jpg|zip|rar)$/i;
$("#fileupload").fileupload({
url: 'http://localhost:8080/uploadDemo/rest/file/ajaxUpload',
dataType: 'json',
add: function(e, data) { //add表示在选择文件时判断格式是否正确
var goUpload = true;
var uploadFile = data.files[0];
if (!fileType.test(uploadFile.name)) {
console.log(uploadFile.name);
$('#uploadResult').html('');
$('#uploadError').html('文件格式不正确');
$('#fileName').val('');
goUpload = false;
}
if (goUpload == true) {
data.submit();
}
},
done: function(e, data) { //done为文件上传成功需要做的事情
$('#progress').hide();
$('#uploadError').html('');
$('#uploadResult').html(data.result.fileName+' 上传成功');
//上传成功将文件名赋值给fileName属性,以便将文件名提交到数据库存储
$('#fileName').val(data.result.fileName);
},
progressall: function(e, data) { //进度条显示
$('#progress').show();
$('#uploadError').html('');
$('#uploadResult').html('');
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar span').css('width', progress + '%');
}
});
});
</script>
</head>
<body>
<!-- <form action="xxx" > 你可以将以下代码放入form表单里面-->
<div class="formControls col-md-10">
<span class="btn btn-success fileinput-button mr-5">
<span>浏览文件</span>
<input id="fileupload" type="file" name="file">
</span>
<span id="uploadResult"></span><span id="uploadError" style="color: red;"></span>
<div class="mt-5">
<span class="uploadTip">只能上传doc,docx,xls,xlsx,ppt,pptx,txt,pdf,zip,rar,jpg格式的文件</span>
</div>
<div id="progress" class="progress mt-10" style="display: none;">
<div class="progress-bar"><span class="sr-only"></span></div>
</div>
<!-- ajax上传成功后返回文件名，如value='xxx.txt' -->
<input type="hidden" id="fileName" name="fileName" >
</div>
<!-- </form> -->
</body>
</html>2.springmvc文件上传封装类，用于封装文件名称，文件大小，文件类型，以及文件的字节数组，这些数据将会返回到前端，jquery fileupload插件会根据这些数据计算并显示进度条。
package com.baidu;
public class FileMeta {
//文件名称
private String fileName;
//文件大小
private String fileSize;
//文件类型
private String fileType;
//文件字节数组
private byte[] bytes;
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public String getFileSize() {
return fileSize;
}
public void setFileSize(String fileSize) {
this.fileSize = fileSize;
}
public String getFileType() {
return fileType;
}
public void setFileType(String fileType) {
this.fileType = fileType;
}
public byte[] getBytes() {
return bytes;
}
public void setBytes(byte[] bytes) {
this.bytes = bytes;
}
}3.springmvc controller层实现文件上传功能，代码如下。
package com.baidu;
import java.io.File;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
@RequestMapping("file")
@Controller
public class FileController {
@RequestMapping(value = "/ajaxUpload")
@ResponseBody
public FileMeta upload(MultipartHttpServletRequest request, HttpServletResponse response) {
String path = request.getSession().getServletContext().getRealPath("upload");
MultipartFile mpf = request.getFile("file");
FileMeta fileMeta = null;
if (mpf != null) {
fileMeta = new FileMeta();
fileMeta.setFileName(mpf.getOriginalFilename());
fileMeta.setFileSize(mpf.getSize() / 1024 + " Kb");
fileMeta.setFileType(mpf.getContentType());
try {
fileMeta.setBytes(mpf.getBytes());
mpf.transferTo(new File(path,mpf.getOriginalFilename()));
} catch (IOException e) {
e.printStackTrace();
}
}
//将封装的文件数据返回到前端
return fileMeta;
}
}4.springmvc项目要想支持文件上传，一定要在spring-servlet.xml视图解析器下面加入文件解析器配置代码，如下。
<!-- 定义文件解释器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 设置默认编码 --> <property name="defaultEncoding" value="utf-8"></property> <!-- 上传图片最大大小50M--> <property name="maxUploadSize" value="52424400"></property> </bean>
你可以将ajax文件上传功能添加到form表单中，ajax上传成功之后会返回成功后的文件名，再把上传的文件名存储到数据库中，比如我的项目就是这样的，如下。
