javascript HTML5檔案上傳FileReader API，html5filereader

javascript HTML5檔案上傳FileReader API，html5filereader

檔案上傳功能現在是越來越普遍，所有的社交網站，媒體網站，比如優酷視頻，微博等，都提供了上傳圖片，上傳視頻等功能。但過去WEB程式員都很清楚，用HTML表單上傳檔案是很麻煩的事情，特別是你想瞭解一下使用者上傳的檔案的一些屬性，必須等它上傳完成後才能知道。

未知的東西上傳到伺服器上，有可能產生安全問題，也有可能體積太大，超過允許，浪費空間。現在好了，WEB技術在進步，HTML5帶來了很多好東西。這個FileReader API就能讓你在使用者上傳之前就能擷取上傳檔案的一些基本屬性。

HTML代碼

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

<-- 一個能上傳多媒體檔案的表單 --><input type="file" id="upload-file" multiple /><-- 顯示圖片的地方 --><div id="destination"></div>

在File API這篇文章裡有詳細的關於能讀取到的檔案的相關資訊，比如地址，體積，尺寸大小，檔案類型等等。

JavaScript

這個例子中我們用input表單域上傳一張圖片，當使用者在自己的電腦裡選中一張圖片後，這個圖片會被顯示到頁面上：

document.getElementById('upload-file').addEventListener('change', function() { var file; var destination = document.getElementById('destination'); destination.innerHTML = ''; // 迴圈使用者多選的檔案 for(var x = 0, xlen = this.files.length; x < xlen; x++) { file = this.files[x]; if(file.type.indexOf('image') != -1) { // 非常簡單的交驗  var reader = new FileReader();  reader.onload = function(e) {  var img = new Image();  img.src = e.target.result; // 顯示圖片的地方  destination.appendChild(img);  };    reader.readAsDataURL(file); } }});

這個例子裡，我們使用FileReader裡的readAsDataURL方法將圖片內容轉換成base64編碼的字串，然後使用圖片的data URI方式顯示它。其它的FileReader讀取方法還有readAsText, readAsArrayBuffer和readAsBinaryString等

有了這個FileReader API，我們就可以避免使用者先將檔案上傳到伺服器，在瀏覽器用戶端我們就可以進行操作。這些在上傳到伺服器前的預先處理是很有必要的。

以上就是本文的全部內容，希望對大家的學習有所協助。

您可能感興趣的文章:

• Jsp頁面實現檔案上傳下載類代碼
• File, FileReader 和 Ajax 檔案上傳執行個體分析(php)
• js 實現 input type="file" 檔案上傳範例程式碼
• 使用AjaxFileUpload.js實現非同步檔案上傳樣本
• ajaxFileUpload.js外掛程式支援多檔案上傳的方法
• javascript結合fileReader 實現上傳圖片
• 談談基於iframe、FormData、FileReader三種無重新整理上傳檔案的方法
• js HTML5 Ajax實現檔案上傳進度條功能
• 基於javascript html5實現多檔案上傳
• javascript html5移動端輕鬆實現檔案上傳