1、背景

ajax的表單提交只能提交data資料到後臺，沒法實現file檔案的上傳還有展示進度功能，這裡用到form.js的外掛來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。

2、靜態頁搭建

html程式碼如下

<div class="upload-fileWrap">
    <button type="button" id="upload-input-btn" class="lx-btn lx-btn-default-fl">選擇檔案</button>
    <form id='myupload' name='myupload' action='' method='post' enctype='multipart/form-data'>
        <input id="upload-input-file" class="upload-input-file" name="file" type="file" accept="audio/mpeg, audio/x-wav" data-value-update="input">
    </form>
    <div class="upload-file-stateWrap">
        <span class="upload-file-result"></span>            
        <div class="progress hidden">
            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                <span class="progress-bar-status">0%</span>
            </div>
        </div>
    </div>
</div>
 

需要解釋下我的結構，#upload-input-file的input標籤是真實的檔案上傳按鈕，包裹form標籤後可以實現上傳功能，#upload-input-btn的button標籤是展示給使用者的按鈕，因為需要樣式的美化。上傳完成生成的檔名將會顯示在.upload-file-result 裡面，.progress 是進度條的位置，先讓他隱藏加上hidden 的class，.progress-bar 是進度條的主體，.progress-bar-status 是進度條的文字提醒。

下面新增需要的css

.hidden{display:none;}
.upload-fileWrap {
    margin: 3px 0 0 -2px;
    position: relative;
}
.upload-input-file {
    position: absolute;
    left: 2px;
    top: 0;
    display: inline-block;
    width: 88px;
    height: 34px;
    line-height: 34px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.upload-file-result {
    color: #a1acc6;
    font-size: 14px;
}
/*進度條*/
.progressWrap {
    position: absolute;
    right: 20px;
    top: 56px;
    width: 200px;
    height: 10px;
}
.progress {
    width: 100%;
    height: 10px;
    background: #0f1529;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden;
}
.progress-bar {
    height: 10px;
    background: url("../img/progress-line.png") repeat-x;
}
.progress-bar span {
    position: absolute;
    color: #58637e;
    font-size: 12px;
    line-height: 18px;
}
.progress-bar span.progress-bar-status {
    left: 50%;
    top: -23px;
    margin-left: -15px;
    color: #1cc3b0;
}
.upload-file-stateWrap {
    position: relative;
    width: 100%;
    height: auto;
}
.upload-file-stateWrap .progress {
    width: 60%;
}
.upload-file-stateWrap span.progress-bar-status {
    top: inherit;
    bottom: -3px;
    left: 60%;
    margin-left: 5px;
}
 

去掉hidden的class，看到的效果是這樣的

3、上傳檔案指令碼

將上傳事件繫結在file的input裡面，繫結方式就隨意了。
var progress = $(".progress-bar"),
status = $(".progress-bar-status"),
percentVal = '0%';
//上傳步驟
$("#myupload").ajaxSubmit({
url: uploadUrl,
type: "POST",
dataType: 'json',
beforeSend: function () {
$(".progress").removeClass("hidden");
progress.width(percentVal);
status.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
percentVal = percentComplete + '%';
progress.width(percentVal);
status.html(percentVal);
console.log(percentVal, position, total);
},
success: function (result) {
percentVal = '100%';
progress.width(percentVal);
status.html(percentVal);
//獲取上傳檔案資訊
uploadFileResult.push(result);
// console.log(uploadFileResult);
$(".upload-file-result").html(result.name);
$("#upload-input-file").val('');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
$(".upload-file-result").empty();
}
});

• ajaxSubmit 外掛封裝的提交方法；
• beforeSend 提交前的回撥函式；
• uploadProgress 提交中的回撥函式，position, total, percentComplete是三個返回值，position是已經上傳完成的位元組數，total表示總的位元組數，percentComplete表示已完成的比例，打印出來如下圖，就是利用這裡返回的資料製作進度條的
  
• success 表示上傳成功的回撥函式。
  上傳中和上傳完成的截圖如下：

更多用法可以參考官網