快捷導(dǎo)航

javascript HTML5文件上傳FileReader API

更新時(shí)間：2020年03月27日 16:10:40 投稿：lijiao

這篇文章主要介紹了javascript HTML5文件上傳FileReader API的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

文件上傳功能現(xiàn)在是越來(lái)越普遍，所有的社交網(wǎng)站，媒體網(wǎng)站，比如優(yōu)酷視頻，微博等，都提供了上傳圖片，上傳視頻等功能。但過(guò)去WEB程序員都很清楚，用HTML表單上傳文件是很麻煩的事情，特別是你想了解一下用戶(hù)上傳的文件的一些屬性，必須等它上傳完成后才能知道。

未知的東西上傳到服務(wù)器上，有可能產(chǎn)生安全問(wèn)題，也有可能體積太大，超過(guò)允許，浪費(fèi)空間?，F(xiàn)在好了，WEB技術(shù)在進(jìn)步，HTML5帶來(lái)了很多好東西。這個(gè)FileReader API就能讓你在用戶(hù)上傳之前就能獲取上傳文件的一些基本屬性。

HTML代碼

這個(gè)FileReader API 的工作原理和 File API 一樣，需要使用input[type="file"] 元素：

<-- 一個(gè)能上傳多媒體文件的表單 -->
<input type="file" id="upload-file" multiple />

<-- 顯示圖片的地方 -->
<div id="destination"></div>

在File API這篇文章里有詳細(xì)的關(guān)于能讀取到的文件的相關(guān)信息，比如地址，體積，尺寸大小，文件類(lèi)型等等。

JavaScript

這個(gè)例子中我們用input表單域上傳一張圖片，當(dāng)用戶(hù)在自己的電腦里選中一張圖片后，這個(gè)圖片會(huì)被顯示到頁(yè)面上：

document.getElementById('upload-file').addEventListener('change', function() {
 var file;
 var destination = document.getElementById('destination');
 destination.innerHTML = '';

 // 循環(huán)用戶(hù)多選的文件
 for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 file = this.files[x];
 if(file.type.indexOf('image') != -1) { // 非常簡(jiǎn)單的交驗(yàn)

 var reader = new FileReader();

 reader.onload = function(e) {
 var img = new Image();
 img.src = e.target.result; // 顯示圖片的地方

 destination.appendChild(img);
 };
 
 reader.readAsDataURL(file);
 }
 }
});

這個(gè)例子里，我們使用FileReader里的readAsDataURL方法將圖片內(nèi)容轉(zhuǎn)換成base64編碼的字符串，然后使用圖片的data URI方式顯示它。其它的FileReader讀取方法還有readAsText, readAsArrayBuffer和readAsBinaryString等

有了這個(gè)FileReader API，我們就可以避免用戶(hù)先將文件上傳到服務(wù)器，在瀏覽器客戶(hù)端我們就可以進(jìn)行操作。這些在上傳到服務(wù)器前的預(yù)處理是很有必要的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: