公司專案有需要用到檔案的非同步上傳功能，最終決定使用jQuery-File-Upload這個外掛來完成功能。

     下載外掛後，將資源加入到專案中（使用springmvc 完成後臺的關於檔案上傳功能，沿用  SpringMVC 的檔案上傳 中檔案上傳功能），在專案中加上如下js（基礎外掛），

<script src="js/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
 

<input id="fileupload" type="file" name="multiFiles"  multiple/>
<button id="startBtn">上傳</button>
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

依次“檔案選擇”，“上傳開始按鈕”，“進度條”，給進度條加上背景色

.bar {
    height: 18px;
    background: green;
}
 

新增如下程式碼：

<script>
$(function () {
    $('#fileupload').fileupload({
    	
    	url:"/upload/multiUpload",
        dataType: 'json',
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        },
        add: function (e, data) {
            data.context = $('#startBtn').click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
        	alert("aaaaaaa");
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        },
        change : function (e, data) {
            $.each(data.files, function (index, file) {
                console.log('Selected file: ' + file.name);
            });
        }
    });
});
</script>
 

執行專案（後臺程式暫不作說明，使用springmvc的檔案上傳功能，詳細請看關於springmvc檔案上傳部

能搞定！