當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5 FileReader API 测试（一）

發布時間：2025/3/8 HTML 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5 FileReader API 测试（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

參考文章

html5之FileReader接口

http://zhangyaochun.iteye.com/blog/1487900

1、FileReader接口的作用：

?? ?用來把文件讀入內存，并且讀取文件中的數據。

2、支持情況

????FF3.6+|?Chrome6+

Js代碼? ?

/*檢測方式*/??

if(typeof?FileReader?==?'undefined'){??

?????//不支持??

}else{??

????//支持??

}??

3、FileReader接口的方法

readAsBinaryString(file) ? ? ? ? ? ? ? ------ 將文件讀取二進制碼

?? ? ? ? ?通常我們將它傳送到后端，后端可以通過這段字符串存儲文件

readAsText(file,[encoding]) ? ? ? ? ?------ 將文件讀取文本

?? ? ? ? ?第二個參數是 文本的編碼方式，默認UTF-8

readAsDataURL(file) ? ? ? ? ? ? ? ? ? ? ------ 將文件讀取為DataURL

將文件讀取為一串Data URL字符串，將小文件以一種特殊格式的URL地址直接讀入頁面。小文件指圖像與html等格式的文件

abort() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? -------?中斷讀取操作

4、FileReader接口的事件

onabort ? ? ? ? ? ? ---------數據讀取中斷時觸發
onerror ? ? ? ? ? ? ?---------數據讀取出錯時觸發
onloadstart ? ? ? ?--------數據讀取開始時觸發
onprocess ? ? ? ? ?--------數據讀取中
onload ? ? ? ? ? ? ? --------數據讀取成功完成時觸發
onloadend ? ? ? ? --------數據讀取完成時觸發，無論成功失敗

http://lucifinilhades.iteye.com/blog/1197826

HTML5文件

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" dir="ltr"><head><meta charset="UTF-8" /><title>HTML5 Filesystem API Demo</title><script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="../js/fileReader.js"></script></head><body><header><h1>HTML5文件API示例</h1></header><section><form id="filelist_sample" name="filelist_sample"><label for="selectFiles">請選擇文件（可多選）：</label><input type="file" name="selectFiles" id="selectFiles" multiple="multiple"/> <button type="button" id="showInfoBtn" name="showInfoBtn">顯示文件信息</button><br/> <button type="button" id="txtBtn" name="txtBtn">測試 readAsText</button> <button type="button" id="binBtn" name="binBtn">測試 readAsBinaryString</button> <button type="button" id="urlBtn" name="urlBtn">測試 readAsDataURL</button> </form><div id="fileContent"></div><footer><table id="info"><caption>文件信息</caption><thead><tr><th>ID</th><th>文件名</th><th>文件類型</th><th>文件大小（KB）</th><th>最后修改日期</th></tr></thead><tfoot><tr><th>合計：</th><th><meter id="count" value="0" min="0" max="10">0</meter></th> <th></th> <th><meter id="sum" value="0" min="0" >0</meter></th> <th><button type="button" id="clearBtn">清除信息</button></th> </tr></tfoot></table></footer></section><footer><div id="console"></div></footer> </body> </html>

fileReader.js文件如下

//typeof Fileif(typeof FileReader == "undefined") {alert("您的瀏覽器未實現FileReader接口！"); }//給jQuery提供訪問FileList對象的功能 jQuery.fn.files = function() {return this[0].files; };//“顯示文件信息”按鈕的click事件代碼 $(function() {$("#showInfoBtn").click(function(event) {$("#clearBtn").click();var fileObjs = $("#selectFiles").files();var sum = 0, count = 1;var tbody = $("<tbody>");for ( var index = 0; index < fileObjs.length; index++) {$("<tr>").append($("<td>").append("<meter>").val(count).text(count)).append($("<td>").text(fileObjs[index].name)).append($("<td>").text(fileObjs[index].type)).append($("<td>").append($("<meter>").val(fileObjs[index].size).text(fileObjs[index].size / 1024))).append($("<td>").text(fileObjs[index].lastModifiedDate)).appendTo(tbody);sum += fileObjs[index].size;count++;}$("td>meter, #sum").attr("max", 5 * 1024 * 1024);$("#info>thead").after(tbody);$("#count").attr("max", "10").val(fileObjs.length).text(fileObjs.length);$("#sum").val(sum).text(sum / 1024);}); });$(function() {$("#clearBtn").click(function(event) {$("#info>tbody, #fileContent, #console").empty();$("#count, #sum").val(0).text(0);}); });//三個按鈕的click事件代碼 $(function() {$("#txtBtn").click(function(event) {$("#selectFiles").readAsText(handler);//$("#selectFiles").readAsText($("#selectFiles").files(),"UTF-8");});$("#binBtn").click(function(event) {$("#selectFiles").readAsBinaryString(handler);});$("#urlBtn").click(function(event) {$("#selectFiles").readAsDataURL(handler);}); });//傳入的事件處理器函數代碼var createTag = function(txt) {$("#console").append($("<span>").text(txt).after("<br/>"));};var handler = {load : function(event) {createTag("this is FileReader's onload event.");$("<p>").append(event.target.result).appendTo("#fileContent");},loadStart : function(event) {createTag("this is FileReader's onloadstart event.");},loadEnd : function(event) {createTag("this is FileReader's onloadend event.");},abort : function(event) {createTag("this is FileReader's onabort event.");},error : function(event) {createTag("this is FileReader's onerror event.");},progress : function(event) {createTag("this is FileReader's onprogress event.");}};var getFileReader = function(handler) {var reader = new FileReader();//var reader = FileReader(handler);reader.onloadstart = handler.loadStart;reader.onprogress = handler.progress;reader.onload = handler.load;reader.onloadend = handler.loadEnd;reader.onabort = handler.abort;reader.onerror = handler.error;return reader;};jQuery.fn.readAsText = function(handler, encoding) {if (typeof encoding == "undefined") {encoding = "UTF-8";}var files = this.files();var reader = null;for ( var i = 0; i < files.length; i++) {//alert(files[i].name);reader = getFileReader(files[i]);if (!/text\/\w+/.test(files[i].type)) {reader.onload=createTag("Loading ..." + files[i].name);reader.loadEnd=createTag("Loading have End!" + files[i].name);} else {reader.onload=createTag("Loading ..." + files[i].name);reader.readAsText(files[i], encoding);alert(reader.result);$("#fileContent").append($("<span>" + files[i].name + "<br>" + reader.result +"<br/>"));reader.loadEnd=createTag("Loading have End!" + files[i].name);}}return this; };jQuery.fn.addText= function(txt) {var createTag = function(txt) {$("#console").append($("<span>").text(txt).after("<br/>"));} };jQuery.fn.readAsBinaryString = function(handler) {var files = this.files();var reader = null;for ( var i = 0; i < files.length; i++) {reader = getFileReader(handler);reader.readAsBinaryString(files[i]);}return this; };jQuery.fn.readAsDataURL = function(handler) {var files = this.files();var reader = null;var imageHandler = function(event) {$("<img>").attr("src", event.target.result).appendTo("#fileContent");};for ( var i = 0; i < files.length; i++) {reader = getFileReader(handler);if (!/image\/\w+/.test(files[i].type)) {reader.readAsDataURL(files[i]);} else {reader.onload = imageHandler;reader.readAsDataURL(files[i]);}}return this; };

在不同的瀏覽器測試效果不同，特別是測試readAsText

火狐12.0測試效果最佳

Opera 12.00 beta 測試截圖

Chrome 19測試截圖

轉載于:https://my.oschina.net/u/559991/blog/60310

總結

以上是生活随笔為你收集整理的HTML5 FileReader API 测试（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。