file 选择图片后预览

  • Post author:
  • Post category:其他


图片上传预览是比较常见的需求,以前的做法,是在旁边隐藏一个 <img> 标签,然后给 file 标签加个事件,当用户选择文件之后,获得文件物理路径(文件绝对路径),然后赋值给<img> 标签的 src 属性。

但是现代浏览器中,出于安全考虑,file 标签已经限制 js 获得文件的绝对路径(以及其他的一些访问本地文件的权限)。当然,既然用户有需求,浏览器就不会平白无故的只限制,而不提供相应的解决方案。现代浏览器中,我们可以用 FileReader 来实现图片预览,原理是将 file 转为 dataURL(也有说Base64),然后赋值给 img 的 src 属性。注意该对象所有方法都没有返回值,结果存在对象的 result 属性中!,这是浏览器中新的一个内置对象,至于兼容性,只能很抱歉的说,自行测试吧。。。

不过我相信,如果浏览器不能获得 file 的绝对路径,那它肯定得实现些相应的东西来解决用户需求(虽然这只是我个人一厢情愿的 YY)。具体怎么样还有待深入研究,现在的我,仅仅只是知道可以这么做。确实很菜逼,如果有大神路过,烦请指点,感激不尽!!!

下面上代码:

/**
 * 高版本浏览器图片预览
 * @param {domNode/string} node 
 */
function fileReader(node, imgNode){
	
	if(node == null || imgNode == null) {
		console.log("请传入合理参数");
		return;
	}
	
	node = typeof node == "string" ? document.getElementById(node) : node;
	imgNode = typeof imgNode == "string" ? document.getElementById(imgNode) : imgNode;
	
	if(typeof FileReader == 'undefined'){
		console.log("浏览器版本较低,不支持FileReader");
		var src = node.value;
		imgNode.src = src;
	}else {
	
		// 获得文件
		var file = node.files[0];
		
		var reader = new FileReader();
		
		// 将文件读取为DataUrl
		reader.readAsDataURL(file);
		
		reader.onload = function(event) {
			imgNode.src = this.result;
		}
		
		reader.onerror = function(event){
			throw new Error("读取出错");
		}
		
		reader.onloadstart = function() {
			console.log("读取开始");
		}
	}
}



版权声明:本文为zhu562002124原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。