简单实现：jquery ajax/jquery.form.js + springmvc上传文件，带进度条

配置springmvc.xml文件，添加以下bean

<!--配置文件上传相关-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8" />
<property name="maxUploadSize" value="104857600" />
<property name="maxInMemorySize" value="40960" />
</bean>

后台Ctroller 

package com.jzy.controll;

import com.jzy.pojo.Result;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.UUID;

/**
* Created by zzb on 2017/9/4.
*/
@Controller
@RequestMapping("upload")
public class FileUploadCtroll {
@Resource
private FileUploadService fileUploadService;

@RequestMapping("/uoLoadBooking")
public @ResponseBody
String uoLoadBooking(@RequestParam("lclfreightid") String lclfreightid,@RequestParam(value = "booking", required = false) MultipartFile file, HttpServletRequest request, ModelMap model) {
//保存到本地的项目外部的某个文件夹下面
String path = "C://test/upload/";
String realName = file.getOriginalFilename();

/*获取上传文件的后缀名*/
String suffix =  realName.substring(realName.lastIndexOf("."));
/** 使用UUID生成文件名称* */
String uuidname = UUID.randomUUID().toString() + suffix;// 构建文件名称

File targetFile = new File(path, uuidname);
if(!targetFile.exists()){
targetFile.mkdirs();
}
try {
//保存文件到本地
file.transferTo(targetFile);

} catch (Exception e) {
e.printStackTrace();
}
return "success";
}
}

jsp：

<div  style="text-align: left;">
<form id="uploadForm" method="post"  action="upload/uoLoadBooking.do" enctype="multipart/form-data">
<input id="uploadinput"    type="file"    name="booking" style="width:100%;height:40%;"/>
</form>
<div id="progress" style="height: 30%;font-size: 13px;font-family: 微软雅黑;"></div>
</div>'

1、jquery   ajax的方式上传：

问题：实际项目发现，这个方法在ie8的情况下不兼容，ie8不支持FormData()构造方法，可以使用第2中兼容的方法，使用jquery.form.js执行上传，只需要稍微修改js方法即可

注意：此时对form的序列不能使用$("#uploadForm").serialize()，这个方法只能对普通的表单参数进行序列化，

   应该使用上面的var formdata = new FormData( $("#uploadForm")[0] )方法。

var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: '/SSM/upload/uoLoadBooking.do?lclfreightid='+lclfreightid +'&userno',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
/* xhr:xhrOnProgress(function(e){
console.log("统计上传文件的大小");
var percent=e.loaded / e.total;//计算百分比
// console.log("统计上传文件的大小");
// console.log(e);
// $("#progress").html(percent);
}),*/
success: function (returndata) {

$("#progress").css("color","black");
$("#progress").html("上传成功!");
},
error: function (returndata) {
$("#progress").css("color","red");
$("#progress").html("上传失败!");
}
});

2、使用Jquery.form.js插件进行上传，测试在ie8下上传成功，而且有回调函数设置进度条

var hideForm = $( "#uploadForm" );
var options = {
dataType : "json",
data: { "lclfreightid": lclfreightid},
beforeSubmit : function() {
// alert("正在上传");
$("#progress").html("正在上传...");
},
success : function(result) {
$("#progress").html("上传成功!");
},
error : function(result) {
$("#progress").html("上传失败!");
}
};
hideForm.ajaxSubmit(options);

关于进度条的几个回调方法，可以查看官方文档：
http://jquery.malsup.com/form/#options-object
另外方便大家，找了一篇比较详细的博文，作者写的非常详细，自己试了下可以的 http://blog.csdn.net/qq_28602957/article/details/53612885