HTML5實現非同步上傳(不用uploadify等前端上傳外掛)
阿新 • • 發佈:2018-12-23
手機端一般不能用 swfupload 類似flash的上傳工具 (對 flash 支援不好) 不過現在手機瀏覽器 都支援HTML5了, 實現使用Html5 上傳檔案 ,直接 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 type="file" id="file" accept="image/*" />
如果你用 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;
};