實踐Html5的上傳檔案

2022-04-23 08:31:35 字數 551 閱讀 2898

技術點:

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...