SpringMVC的文件上传
文件上传以及进度条的展示
前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/j.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//获取要上传的文件,jq是一个数组,获取第一个数据, files[0]获取到二进制数据
var file = $("#fileUpload")[0].files[0];
var formData = new FormData();
formData.append("fileUpload",file);
//发起ajax请求完成上传
$.ajax({
url: "fileUpload",
type: "post",
processData: false,
contentType: false,
data: formData,
xhr: function() {
var xhr = new XMLHttpRequest();
//使用XMLHttpRequest.upload监听上传过程,注册progress事件,打印回调函数中的event事件
xhr.upload.addEventListener('progress', function (e) {
console.log(e);
//loaded代表上传了多少
//total代表总数为多少
var progressRate = (e.loaded / e.total) * 100 + '%';
//显示上传百分比
$("#uploadSpan").html(progressRate);
//通过设置进度条的宽度达到效果
$('.progress > div').css('width', progressRate);
})
return xhr;
},
success: function (data) {
alert("上传文件成功!");
$("#upid").val(data);
}
})
})
})
</script>
<style type="text/css">
.progress {
width: 600px;
height: 10px;
border: 1px solid #ccc;
border-radius: 10px;
margin: 10px 0px;
overflow: hidden;
}
/* 初始状态设置进度条宽度为0px */
.progress > div {
width: 0px;
height: 100%;
background-color: yellowgreen;
transition: all .3s ease;
}
</style>
<table cellpadding="10px">
<form action="insertMail" method="post">
<tr>
<td>收件人</td>
<td>
<input type="text" name="recid">
</td>
</tr>
<tr>
<td>主题</td>
<td><input type="text" name="mtitle" value=""></td>
</tr>
<tr>
<td>正文</td>
<td>
<textarea name="mcontext" id="mcontent" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>附件</td>
<td>
<input type="file" id="fileUpload" name="file">
<input type="button" value="上传" id="btn">
<%--进度条--%>
<div class="progress">
<div></div>
</div>
<%--上传的百分比--%>
<span id="uploadSpan"></span>
<%--获取上传文件数据库中的id--%>
<input type="hidden" name="upid" value="" id="upid">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="发送">
</td>
</tr>
</form>
</table>
</body>
</html>
后台代码
/*文件上传*/
@RequestMapping("fileUpload")
@ResponseBody
//第一个参数名必须跟前台的formData.append("fileUpload",file);的键名一致
public String fileUpload(MultipartFile fileUpload, HttpServletRequest request) throws IOException {
//动态获取项目下的文件存储路径
ServletContext context = request.getServletContext();
String realPath = context.getRealPath("/upload");
//创建文件新的存储名
//获取文件的原始名
String name = fileUpload.getOriginalFilename();
//获取文件的后缀名
String suffix=name.substring(name.lastIndexOf("."));//.jpg
//创建文件新的名字
String newName= ""+ UUID.randomUUID()+System.currentTimeMillis()+suffix;
//将文件存储到服务器硬盘中
fileUpload.transferTo(new File(realPath,newName));
//存储上传记录信息
Upload upload = new Upload();
upload.setNewname(newName);
upload.setOldname(name);
upload.setUptype(fileUpload.getContentType()); //文件的类型
//调用业务层存储到数据库
int upid= mailService.insUploadInfoService(upload);
return upid+"";
}
注意:文件上传要在springmvc.xml文件中配置上传解析的bean
<!--配置上传解析bean-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>