1. 程式人生 > >HTML5實現非同步上傳(不用uploadify等前端上傳外掛)

HTML5實現非同步上傳(不用uploadify等前端上傳外掛)

手機端一般不能用 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; };