HTML5 FileReader API 測試（一）

時間 2019-11-19

標籤 html5 html filereader api 測試欄目 HTML5 简体版

原文原文鏈接

參考文章javascript

html5之FileReader接口html

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

一、FileReader接口的做用：java

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

二、支持狀況後端

FF3.6+| Chrome6+瀏覽器

Js代碼

/*檢測方式*/
if(typeof FileReader == 'undefined'){
//不支持
}else{
//支持
}

三、FileReader接口的方法app

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

一般咱們將它傳送到後端，後端能夠經過這段字符串存儲文件

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

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

readAsDataURL(file) ------ 將文件讀取爲DataURL

將文件讀取爲一串Data URL字符串，將小文件以一種特殊格式的URL地址直接讀入頁面。

小文件指圖像與html等格式的文件

abort() ------- 中斷讀取操做

四、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 File

if(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測試截圖