HTML5 檔案上傳

2021-06-25 17:15:32 字數 2422 閱讀 1312

源**

function getobjecturl(file) 

var url = null;

if (window.createobjecturl != undefined) else if (window.url != undefined) else if (window.webkiturl != undefined)

return url;

}

readasbinarystring

readasbinarystring的result應該是乙個二進位製流,而log出的結果是乙個夾雜著亂碼符號的文字,裡面還能看到是用ps儲存的之類的資訊。

readasdataurl

readasdataurl的result則是乙個base64的**,可以直接放入html的img標籤的屬性src上。

readastext

readastext的result和二進位制的顯示出來基本是一樣的,包括乙個資訊頭,接著大段的亂碼應該是本身。

該方法還有乙個可選的引數[encoding],即文字的編碼方式,預設為urf-8。

abort

abort是乙個特別的方法,用來打斷讀取。當上傳超時或者其他操作需要打斷時就可以呼叫這個介面打斷。另外還可以監聽abort事件來處理打斷後的情況。

實現檔案的非同步上傳,以及上傳的百分比顯示。

function getallfiles()

)return allfiles

}var filefilter=;

var url="/bind/upload/";

function onprogress(file, loaded, total)

function onsuccess(file,result)

function sureupload()

, false);

xhr.onreadystatechange = function(e)

} else }};

// 開始上傳

xhr.open("post", self.url, true);

xhr.setrequestheader("x_filename", escape(file.name));

xhr.send(file);

} })(file);

}}

值得一看的是後台的處理程式,這裡我們需要注意幾點

流儲存的時候選擇使用filestream才可以儲存。

在上面的**中,使用了目前只有在firefox和chrome中才支援的xmlhttprequest2物件,xmlhttprequest2是對原先大家熟悉的xmlhttprequest的加強,目前還沒最後定案,可以參考 的描述。在上面的**中,首先是判斷了上傳檔案的型別是否為檔案以及大小是否符合要求,如果符合要求的話,則呼叫send方法傳送檔案到服務端,並且這裡設定了http檔案頭x_filename為上傳的檔名。

參考**

html5檔案 上傳

表單提交檔案是最常見的場景,使用者選擇檔案後,觸發了檔案選擇框的change事件,通過訪問檔案選擇框元素的files屬性可以拿到選定的檔案列表。如果檔案選擇框指定了multiple,則乙個檔案選擇框可以同時選擇多個檔案,files包含了所有選擇的檔案物件 如果沒有指定,則只能選擇乙個檔案,files...

html5 檔案拖拽上傳

本文首先發表在 碼蜂筆記 html5 檔案拖拽上傳是個老話題了,網上有很多例子,我一開始的 也是網上找來改的,只是踩了幾個坑之後就想把過程記錄下來。下面主要介紹從瀏覽器外拖拽檔案到瀏覽器進行上傳的實現。首先會介紹一些必須的基礎。拖拽事件有下面這些 拖拽物件用來傳遞資料的媒介,通過拖拽事件的event...

HTML5 檔案讀取

檔案讀取 title head body input type file class file multiple img src alt id img script 由於 檔案的src屬性,可以通過採用網路位址或base64的方式顯示,因此我們可以利用readasdataurl實現對的預覽。獲取檔案...