jquery ajax多文件上传，进度条

1.JSP页面部分 引入 jQuery v1.8.3.js和bootstrap.css

//配置项<script type="text/javascript">    var config = {        support: "image/jpg,image/png,image/bmp,image/jpeg,image/gif",// Valid file formats        form: "demoFiler",// Form ID        dragArea: "dragAndDropFiles",// Upload Area ID        uploadUrl: "${ctx}/upload/fileUpload",// Server side upload url        submitHandler:"submitHandler"    //上传按钮    }</script>//JSP页面 <form name="demoFiler" id="demoFiler" enctype="multipart/form-data">          <input type="file" name="multiUpload" id="multiUpload" multiple/>          <input type="button" name="submitHandler" id="submitHandler" value="Upload" class="buttonUpload"/>           </form>           <div class="progress progress-striped active">           <div style="width: 0.1%;" class="bar"></div>            </div>

2.JS

var path=getContextPath();var delFileList=[];$(document).ready(function () {    initMultiUploader(config);});function multiUploader(config) {    this.config = config;    this.items = "";    this.all = [] ;    this.allFileLists  = [];    var self = this;    multiUploader.prototype._init = function () {        if (window.File &&            window.FileReader &&            window.FileList &&            window.Blob) {            var inputId = $("#" + this.config.form).find("input[type='file']").eq(0).attr("id");            document.getElementById(inputId).addEventListener("change", this._read, false);            document.getElementById(this.config.submitHandler).addEventListener("click", this._submit, false);        } else            console.log("Browser supports failed");    }    multiUploader.prototype._submit = function (e) {        e.stopPropagation();        e.preventDefault();        var index=0;        if (self.allFileLists.length > 0) {            document.getElementById('submitHandler').disabled=true;            fileUpload(self.allFileLists,index);        }    }    multiUploader.prototype._preview = function (data) {        this.items = data;        if (this.items.length > 0) {            var html = "";            var uId = "";            for (var i = 0; i < this.items.length; i++) {                uId = this.items[i].name._unique();                var sampleIcon = '<img src='+path+'/js/fileUpload/images/image.png />';                var errorClass = "";                if (typeof this.items[i] != undefined) {                    if (self._validate(this.items[i].type) <= 0) {                        sampleIcon = '<img src='+path+'/js/fileUpload/images/unknown.png />';                        errorClass = " invalid";                    }else{                        self.allFileLists.push(this.items[i]);                    }                    html += '<div class="dfiles' + errorClass + '" rel="' + uId + '"><h5>' + sampleIcon + this.items[i].name + '</h5><div id="' + uId + '" class="delete" onclick="delImg(this)" style=""><img src='+path+'/js/fileUpload/images/trash.png /></div><div id="' + uId + '" class="progress" style="display:none;"><img src='+path+'/js/fileUpload/images/ajax-loader.gif /></div></div>';                }            }            $("#dragAndDropFiles").append(html);        }    }    multiUploader.prototype._read = function (evt) {        if (evt.target.files) {            self._preview(evt.target.files);            self.all.push(evt.target.files);        } else            console.log("Failed file reading");    }    multiUploader.prototype._validate = function (format) {        var arr = this.config.support.split(",");        return arr.indexOf(format);    }     String.prototype._unique = function () {        return this.replace(/[a-zA-Z]/g, function (c) {            return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);        });    }    this._init();}function initMultiUploader() {    new multiUploader(config);}function shwoProgress(index,total,loaded) {    var width = Math.round(loaded/total * 100) + "%"    ;    $("#percentage").html("正在上传第个"+(index+1)+"文件，上传进度："+width);    $(".bar").css("width",width);}var xhrOnProgress=function(fun) {    xhrOnProgress.onprogress = fun; //绑定监听    //使用闭包实现监听绑    return function() {        //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象        var xhr = $.ajaxSettings.xhr();        //判断监听函数是否为函数        if (typeof xhrOnProgress.onprogress !== 'function')            return xhr;        //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去        if (xhrOnProgress.onprogress && xhr.upload) {            xhr.upload.onprogress = xhrOnProgress.onprogress;        }        return xhr;    }}function getContextPath(){    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp    var curWwwPath=window.document.location.href;    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp    var pathName=window.document.location.pathname;    var pos=curWwwPath.indexOf(pathName);    //获取主机地址，如： http://localhost:8083    var localhostPaht=curWwwPath.substring(0,pos);    //获取带"/"的项目名，如：/uimcardprj    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);    if("/report-web-boss"==projectName || "/sboss"==projectName){        return(localhostPaht+projectName);    }else{        return localhostPaht;    }}function  fileUpload(allFileLists,index){ var file= allFileLists[index];    if (typeof file != undefined ) {        var data = new FormData();        var ids = file.name._unique();        data.append('file', file);        data.append('index', ids);        $("#percentage").html("正在上传第个"+(index+1)+"文件，上传进度：0%");        $(".bar").css("width", "0%");        $(".dfiles[rel='" + ids + "']").find(".progress").show();        $(".dfiles[rel='" + ids + "']").find(".delete").hide();        $.ajax({            type: "POST",            url: config.uploadUrl,            data: data,            cache: false,            contentType: false,            //async: false,            processData: false,            xhr: xhrOnProgress(function (e) {                shwoProgress(index, e.total, e.loaded);            }),            success: function (response) {                $(".dfiles[rel='" + ids + "']").find(".progress").hide();                if ((index + 1) == allFileLists.length) {                    allFileLists.length = 0;                    $("#dragAndDropFiles").html("");                    $("#percentage").html("上传完成");                    document.getElementById('submitHandler').disabled = false;                } else {                    index++;                    fileUpload(allFileLists,index);                }            }        });    }}function delImg(e){   var ids=$(e).attr("id") ;    $(".dfiles[rel='" + ids + "']").remove();    delFileList.pop(ids);}

3.JAVA 部分

/*     * 采用file.Transto 来保存上传的文件     */    @RequestMapping("/fileUpload")    @ResponseBody    public String  fileUpload2(@RequestParam("file") CommonsMultipartFile file) throws IOException {        net.sf.json.JSONObject member = new net.sf.json.JSONObject();        try{            String path="D:/upload/"+new Date().getTime()+file.getOriginalFilename();            File newFile=new File(path);            //通过CommonsMultipartFile的方法直接写文件（注意这个时候）            file.transferTo(newFile);            //构建series所需参数            member.put("success", "ok"); //对应series.name        }catch (Exception e){            member.put("success", "error"); //对应series.name        }        return member.toString();    }

4.SpringMVC配置部分

<!-- 多部分文件上传 -->    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">        <property name="maxUploadSize" value="104857600" />        <property name="maxInMemorySize" value="4096" />        <property name="defaultEncoding" value="UTF-8"></property>    </bean>