HTML5 AJAX 異步上傳文件

html5 上傳文件挺簡單的 

方法1：

直接  new FormData(); 這個基於XMLHttpRequest 2  新增的API 就好了 你可以先創建一個空的 FormData 對象,然後使用 append() 方法向該對象裏添加字段，如下：

<input type="file" id="file" />
<script type="text/javascript">
var oMyForm = new FormData();
 
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 數字123456被立即轉換成字符串"123456"
 
// fileInputElement中已經包含了用戶所選擇的文件
oMyForm.append("userfile", document.ElementById('file').files[0]);
 
oMyForm.append("webmasterfile", oBlob);
 
var oReq = new XMLHttpRequest();
oReq.open("POST", "__URL__/api/upload");
oReq.send(oMyForm);
</script>

這樣就實現了 往後端上傳文件 。

當然你也可以在 file 裏面設置 只允許上傳圖片 accept 屬性

<input id="file" accept="image/*" type="file" />

方法2：

如果你用 jquery 那麼也可以在jquery 裏面實現

vm.save = function(){
var data = new FormData();
data.append('a_id', model.a_id);
data.append('name', model.name);
data.append('sort', model.sort);
data.append('file', $('#aaa')[0].files[0]);
$.ajax({
url: '__URL__/picSave',
type: 'POST',
data: data,
processData: false, // 告訴jQuery不要去處理髮送的數據
contentType: false // 告訴jQuery不要去設置Content-Type請求頭
}).done(function(ret){
if (ret) {
   alert(ret);
}else{
    alert('保存成功！');
    //location = '__URL__';
}
});
return false;
};

 

原文鏈接：https://www.fedte.cc/p/429.html

---

另外可參考本人的一篇文章，關於html5上傳部分：

struts2異步上傳文件及前後端圖片壓縮上傳