用File API做图片预览功能

用File API做图片预览功能
作者：Neoxone 发表时间： 2012年11月28号，星期三阅读：8,347 次

图片上传预览应该是个蛮实用的功能。下面利用html5 的 Files API实现如下:

<input type="file" id="fileElem" multiple accept="image/*"  onchange="handleFiles(this)">
<div id="fileList" style="width:200px;height:200px;"></div>
<script>
	window.URL = window.URL || window.webkitURL;
	var fileElem = document.getElementById("fileElem"),
	    fileList = document.getElementById("fileList");
	function handleFiles(obj) {
		var files = obj.files,
			img = new Image();
		if(window.URL){
			//File API
			  alert(files[0].name + "," + files[0].size + " bytes");
		      img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
		      img.width = 200;
		      img.onload = function(e) {
		         window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
		      }
		      fileList.appendChild(img);
		}else if(window.FileReader){
			//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
			var reader = new FileReader();
			reader.readAsDataURL(files[0]);
			reader.onload = function(e){
				alert(files[0].name + "," +e.total + " bytes");
				img.src = this.result;
				img.width = 200;
				fileList.appendChild(img);
			}
		}else{
			//ie
			obj.select();
			obj.blur();
			var nfile = document.selection.createRange().text;
			document.selection.empty();
			img.src = nfile;
			img.width = 200;
			img.onload=function(){
		      alert(nfile+","+img.fileSize + " bytes");
		    }
			fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+nfile+"')";
		}
	}
</script>

关于Files API本身不做详述，可另行参考：
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

HTML5的 file input标签支持multiple 和 accept ，前一个属性可控制多文件选择，后一个控制上传的文件类型。
files对象可不是单个的file对象，单个的file对象包含其中，而单个的file主要包含如下key/value:

name: “F_5cac2.gif”
size: 3589202
type: “image/gif”
在firefox下，还开放了一项 mozFullPath ，是文件完整的本地路径。(不好意思，这个属性值是取不出来的，只有火狐浏览器本身能识别)

另外，做了一下ie和opera的兼容。
ie下面没有直接设置img的src属性，而采用了AlphaImageLoader滤镜，这也是为了兼容考虑，我记得以前ie7是无法获取文件的完整路径的，这个待考，如果能获取完整路径，直接设置src即可。

而opera（目前为Presto/2.12.388，Version/12.11）因为不支持createObjectURL/revokeObjectURL方法，参见：http://www.opera.com/docs/specs/presto2.12/apis/#file
所以我们就用了FileReader对象的readAsDataURL()方法将 blob(binary large object)数据转换为一个Data URL（参见http://www.opera.com/docs/specs/presto2.11/file/#blob），放入img标签进行显示。值得一提的是，使用FileReader的方式同样适用于Firefox，webkit的浏览器。

标签： createObjectURL, File Api, mozFullPath

这篇文章发布于 2012年11月28号，星期三，16:04，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

annaclio 说：

2013年10月18日于11:02

感谢分享

多文件上传，自定义添加数目！可以兼容多浏览器 - web标准 - 开发者第1097450个问答说：

2013年11月4日于16:44

[...] http://www.cssass.com/blog/index.php/2012/1306.html 本条目发布于 2012 年 12 月 17 日。属于 web标准分类。作者是 admin。 0 次浏览 document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) [...]