上传图片快速预览HTML5 FileReader + Window.URL+滤镜（兼容低版本IE）

在网页中经常需要上传图片并进行预览，大多数情况下是通过ajax将图片上传到后端，然后反馈上传状态和结果给前端进行预览。这里我们介绍三种快速的上传图片预览方法，不需要后端参与也可快速进行图片预览。
FileReader文档
Window.URL文档

---

1.获取File对象

两种预览方法均需要先获取<input type='file'>控件的file对象

var fileinput = Document.getElementById('id');
var File = fileinput.files[0];  //获取第一个File对象
//当上传文件为多个时，通过循坏获取多个File对象
var fileList = fileinput.files;
		for( var i = 0 ; i < fileList.length ; i++ ){
			console.log(fileList[i]);
		}

属性

File.name  //返回当前 File 对象所引用文件的名字，只读 
File.size  //返回文件的大小，只读，单位为字节
File.type  //返回文件类型，例如 PNG 图像是 "image/png"，只读
File.lastModifiedDate //返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代，只读

//可以根据以上属性设置上传文件类型以及最大上传文件大小

---

2.FileReader

构造对象

if (window.FileReader){    //检测浏览器是否支持
	var reader = new FileReader();  //构造FileReader对象
}else{
	//不支持则只有使用其他图片预览方法
}

方法

reader.readAsArrayBuffer(File);  //将文件读取为ArrayBuffer对象格式
reader.readAsBinaryString(File); //将文件读取为二进制数据
reader.readAsDataURL(File);   //将文件读取后返回其URL，适合图片预览
reader.readAsText(File,encoding='UTF-8') //将文件读取为文本形式，可指定编码方式
reader.abort（）  //终止读取操作

事件

reader.onloadstart = function(){
	//文件开始读取时触发
};

reader.onprogress = function(event){
	//文件读取过程时定时触发
	//已读取文件大小: event.loaded
	//文件总大小: event.total
	//可利用以上两个参数和HTML的<progress>标签搭配，制作一个读取进度条
};

reader.onabort = function(){
	//当文件读取被中止时触发
};

reader.onerror = function(){
	//当读取操作发生错误时触发
};

reader.onload = function(){
	//当读取操作成功完成时触发
};

reader.onloadend = function(){
	//当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.
};

属性

reader.error  //在读取文件时发生的错误. 只读

reader.readyState  //表明FileReader对象的当前状态。包含以下三种状态，0：还没有加载任何数据；1：数据正在被加载；2：已完成全部的读取请求

reader.result   //读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.

预览方法

使用readAsDataURL（）方法，读取完成后，result属性中即保存着图片的URL，赋值给<img>的src属性即可

---

3.Window.URL##

获取URL对象

var URL = window.URL || window.webkitURL;

创建图片URL

var imageURL = URL.createObjectURL(File);
//创建后即可直接使用该URL，赋值给<img>的src属性

释放URL

 URL.revokeObjectURL(imageURL) 

---

4.IE滤镜

try
{
	fileobj.select();
	fileobj.blur();
	var path = document.selection.createRange().text;
	var pic = document.getElementById("person_pic");   //获取img标签
	pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + path + "\")";    //滤镜预览图片
	pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';                 //设置img的src为base64编码的透明图片，要不会显示红xx
}
catch(e)
{
	alert(e+"\n"+"如果错误为：Error:Automation 服务器不能创建对象；"+"\n"+"请按以下方法配置浏览器："+"\n"+"请打开【Internet选项-安全-Internet-自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本（不安全）-点击启用-确定】");
}

---

5.使用例子

$(document).on("change","input[type=file]",function(){	//上传头像图片预览，未来元素绑定法
	var fileobj = $(this)[0];
	if (fileobj && fileobj.files){   //是否能获取file对象
		var headimage = fileobj.files[0]
		if (headimage.type.split('/')[0] == 'image'){
			if(headimage.size/1024/1024 <= 1 ){
					$('#pic_name').text(headimage.name);
					if (typeof FileReader != 'undefined'){
						var reader = new FileReader();
						reader.readAsDataURL(headimage);
						reader.onload = function(){
							var dataURL = reader.result;
							$("#person_pic").attr("src",dataURL);
						};
					}else{
						var URL = window.URL || window.webkitURL;
						var imageURL = URL.createObjectURL(headimage);
						$("#person_pic").attr("src",imageURL);
					} 
			}else{
				alert("图片大小必须小于1M")
				fileobj.value = '';
				$('#pic_name').text("上传图片失败");
			}
		}else{
			alert("上传文件必须为图片格式");
			fileobj.value = '';
			$('#pic_name').text("上传图片失败");
		}
	}else{    //不能获取file对象，一般都是低版本的IE,使用滤镜
		try{
			fileobj.select();
			fileobj.blur();
			var path = document.selection.createRange().text;    
			var fso = new ActiveXObject("Scripting.FileSystemObject");
			var fileSize = fso.GetFile(path).size;
			if (fileSize/1024/1024 >= 1){        //检查图片大小
				var file_clone = fileobj.cloneNode(false);
				fileobj.parentNode.replaceChild(file_clone,fileobj);    //由于低版本IE无法修改input file的值，直接克隆一个替换原来的实现清空操作
				$('#pic_name').text("上传图片失败");
				alert("图片大小必须小于1M");
			}else{                                //预览图片
				var text_list = $("input[type=file]").val().split("\\");
				var pic_name = text_list[text_list.length-1];
				$('#pic_name').text(pic_name);
				var pic = document.getElementById("person_pic");
				pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + path + "\")";    //滤镜预览图片
				pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';                 //设置img的src为base64编码的透明图片，要不会显示红xx
			}
		}catch(e){
			alert(e+"\n"+"如果错误为：Error:Automation 服务器不能创建对象；"+"\n"+"请按以下方法配置浏览器："+"\n"+"请打开【Internet选项-安全-Internet-自定义级别-ActiveX控件和插件-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本（不安全）-点击启用-确定】");
		}
		
	}
});

---

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！