通过file按钮上传的图片如何显示出来 FileReader

56 阅读 0 评论 37 点赞

我是靠谱客的博主着急跳跳糖，最近开发中收集的这篇文章主要介绍通过file按钮上传的图片如何显示出来 FileReader，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

参考个人博客：http://www.zhuzhuman.com/nav-1/type-1/article/19.html

当我们使用file类型的按钮上传图片的时候，有时候希望图片能显示在页面里，那么如何显示呢？
使用file的onchange事件可以监听到上传按钮是否发生了上传。如果这时候获取它的value值，在部分浏览器上是可以获取到图片路径的。但是一些浏览器出于安全考虑，获取到的路径会全部变成"C:fakepath + 文件名"的形式。而我们使用该路径去显示图片是无法显示的。
H5中有FileReader,用于读取文件。我们可以在file按钮onchange的时候，去读取上传文件的信息。从而获取上传图片的dataURL格式的数据(通过data协议显示图片 data:image/图片格式;base64,…)，
##FileReader使用方法##

1. 创建

new FileReader()

<script type="text/javascript">
	var fr = new FileReader();  
	// 可使用window.FileReader是否为真来判断当前浏览器是否支持FileReader。
	// if(window.FileReader) {
		// var fr = new FileReader();  
	// }
</script>

2. 事件

1. onabort       当读取操作被中止时调用
2. onerror       当读取操作发生错误时调用
3. onload        当读取操作成功完成时调用
4. onloadend     当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用
5. onloadstart   当读取操作将要开始之前调用
6. onprogress    在读取数据过程中周期性调用

例：
	fr.onload = function(){
		this.result; 
		// 文件一旦开始读取，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，成功则result值为读取的结果。
	};

3. 状态常量

常量名     值      描述
——————————————————————————————————
EMPTY	  0	   还没有加载任何数据
LOADING	  1	   数据正在被加载
DONE	  2	   已完成全部的读取请求

###4. 属性###
1. error 在读取文件时发生的错误。只读。
2. readyState 表明FileReader对象的当前状态. 值为状态常量中的一个。只读。
3. result 读取到的文件内容。这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的。只读。
###5. 方法###
1. abort()
中止该读取操作.在返回时,readyState属性的值为DONE。当没在进行读取操作时(也就是readyState属性的值不为LOADING时),调用abort()方法会抛出该异常.

2. readAsArrayBuffer(指定的对象)
	开始读取指定对象中的内容。读取的结果result属性中将包含一个ArrayBuffer对象，以表示所读取文件的内容。当读取操作完成时,readyState属性的值会成为DONE。

3. readAsBinaryString(指定的对象)
	开始读取指定对象中的内容。当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含所读取文件的原始二进制数据。

4. readAsDataURL(指定的对象)
	开始读取指定对象中的内容。当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

5. readAsText(指定的对象,编码形式)  
	第二个参数为可选参数，一个字符串,指定编码形式，默认'utf-8'
	开始读取指定对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含一个字符串以表示所读取的文件内容.

file按钮

获取文件的详细信息：

<input id="btn" type="file" />
<script type="text/javascript">
    var fileBtn = document.getElementById('btn');
    // 获取上传文件信息
    fileBtn.onchange = function () {
        var file = this.files[0]; // files代表上传的文件(可上传多个文件)，files[0],代表取上传文件的第一个。
        console.log(file); // 是一个对象，显示上传文件的相关信息，有name文件名、size文件大小、type文件类型、最近上传时间等属性
		if(file.type.indexOf('image') == -1) {
			alert('上传文件非图片');
		}; // 上传文件的type属性，可以用来过滤上传文件     
</script>

案例：

<input id="btn" type="file" />
<img id="showimg" src="" />
<script type="text/javascript">
	var showimg = document.getElementById('showimg');
	var fileBtn = document.getElementById('btn');
	// 获取上传文件信息
	fileBtn.onchange = function () {
		var file = this.files[0]; 
		if(window.FileReader) {
			var fr = new FileReader();
			fr.readAsDataURL(file);
			fr.onload = function(e) {
				console.log(e.target); // e.target返回FileReader对象,里面包含：事件，状态，属性，结果等
				console.log(this); // 同e.target返回结果一样,两者等价
				console.log(e.target.result); // 读取的结果，dataURL格式的
				showimg.src = this.result; // 图片可显示出来
			};
		} else {
			alert('暂不支持FileReader');
		};
	};
</script>