博客

图片上传预览是比较常见的需求，以前的做法，是在旁边隐藏一个 <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("读取开始");
		}
	}
}