技術點:
1.通過input的change事件獲取檔案資訊:
onchange = function() {
this.files
這個files屬性是htmlinputelement介面的屬性,只存在於現代瀏覽器中(ie10)
2.檔案物件中的檔案資訊
主要是name,size,type這三個屬性
3.dom物件的classlist屬性
把屬性的classname物件化,不用再像以前使用拼接字串的方式操作。
4.使用filereader非同步讀取本地檔案或檔案物件
reader
5.使用formdata新建傳遞到ajax的物件,可以傳遞檔案物件
整體流程:
1.上傳檔案控制項繫結change事件
2.通過change事件的觸發,獲得inputdom的files屬性,也就是上傳的檔案資訊。
3.通過filereader讀取file,獲得用於展示的dataurl,這樣在上傳成功前可以看到預覽
5.後台處理,可以自己處理流,我用的是formidable控制項。
HTML5 非同步上傳檔案
最近公司要做手機端 要用到上傳,手機端一般不能用 swfupload 類似flash的上傳工具 對 flash 支援不好 不過現在手機瀏覽器 都支援html5了 所以 這幾天網上查了下 實現使用html5 上傳檔案 其實 html5 上傳檔案挺簡單的 直接 new formdata 這個基於xmlh...
HTML5 檔案上傳
源 function getobjecturl file var url null if window.createobjecturl undefined else if window.url undefined else if window.webkiturl undefined return u...
html5檔案 上傳
表單提交檔案是最常見的場景,使用者選擇檔案後,觸發了檔案選擇框的change事件,通過訪問檔案選擇框元素的files屬性可以拿到選定的檔案列表。如果檔案選擇框指定了multiple,則乙個檔案選擇框可以同時選擇多個檔案,files包含了所有選擇的檔案物件 如果沒有指定,則只能選擇乙個檔案,files...