本文将使用 apache fileupload ,spring MVC jquery 实现一个带进度条的多文件上传, 由于fileupload 的局限,暂不能实现每个上传文件都显示进度条,只能实现一个总的进度条
优点:不用引入第三方的组件(如js框架,flash等)
缺点:如果同时上传多个文件,由于apache fileupload API的限制,只能显示一个总的进度条
1.引入环境所需要的jar包
引入上传工具类jar包
commons-io
commons-io
2.4
commons-fileupload
commons-fileupload
1.3.1
引入mvc处理json数据jar包(@requestbody&@responsebody)
com.fasterxml.jackson.core
jackson-core
2.5.1
com.fasterxml.jackson.core
jackson-databind
2.5.1
2.jsp页面
$(document).ready(function(){
$('#subbut').bind('click',function(){
$('#fForm').submit();vareventFun= function(){
$.ajax({
type:'GET',
url:'${pageContext.request.contextPath}/test/process.action',
data: {},
dataType:'json',
success :function(data){
$("#fff").html("上传进度:"+data.show);
$("#proBar").progressbar({
value: data.rate
});if(data.rate== 100){
window.clearInterval(intId);
alert("上传完成");
}
}});};varintId=window.setInterval(eventFun,100);
});
});
Insert title here上传文件: