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

川长思鸟来 2022-06-02 06:58 106阅读 0赞

在网页中经常需要上传图片并进行预览，大多数情况下是通过ajax将图片上传到后端，然后反馈上传状态和结果给前端进行预览。这里我们介绍三种快速的上传图片预览方法，不需要后端参与也可快速进行图片预览。  
[FileReader文档][FileReader]  
[Window.URL文档][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控件初始化并执行脚本（不安全）-点击启用-确定】");
    		}
    		
    	}
    });

--------------------

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[FileReader]: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
[Window.URL]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/URL
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220602/c5583c62ac1e44a2b7de2d7375bc7f99.png