简单实现：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.youkuaiyun.com/qq_28602957/article/details/53612885