HTML5+Ajax上傳文件

歡迎交換友鏈 Laker's Blog--進擊的程序媛

Github： https://github.com/younglaker

微博:江小湖Laker

</div>

</div>

HTML

input 類型設為 file ：

<label for="img_input"></label>
<input id="img_input" type="file"/>

如果想上傳多文件，可添加 multiple

<input type="file" name="img" multiple="multiple" />

用 accept="MIME_type" 限制提交的文件類型，用逗號隔開的 MIME 類型 列表（服務器端也要最好類型檢測雙保險），如：

<input type="file" accept="image/gif, image/jpeg" />
<input type="file" accept="image/*"/>

獲取文件內容

JavaScript：

var file = document.getElementById('fileToUpload').files[0];

jQuery：

var file = $("#img_input").prop("files")[0];

上傳

XMLHttpRequest Level 2添加了一個新的接口 FormData 。利用FormData對象，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件。比起普通的Ajax，使用FormData的最大優點就是我們可以異步上傳一個二進制文件。

// 創建
var form_data = new FormData();

// 獲取文件
var file_data = $("#img_input").prop("files")[0];
// 把所以表單信息
form_data.append("id", "001");
form_data.append("name", "test");
form_data.append("img", file_data);
$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    processData: false,  // 注意：讓jQuery不要處理數據
    contentType: false,  // 注意：讓jQuery不要設置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});</pre> 
 
多文件上傳

方法一 ：一次性上傳多個文件
如果后臺接口允許多文件上傳，就把文件存到一個變量后上傳。
方法二 ：一次性上傳多個文件
 如果后臺接口要求單個文件，就循環獲取文件信息提交，Ajax使用同步上傳 async: false 。 
跨域
 JSONP是使用GET方法，無法發送文件。可以讓后臺開啟CORS，Ajax也使用跨域 crossDomain: true 即可。 
$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    crossDomain: true,
    processData: false,  // 注意：讓jQuery不要處理數據
    contentType: false,  // 注意：讓jQuery不要設置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});
 </div>