用HTML5的File API做上传图片预览功能

2024-09-05 12:18:48

字体：大中小

来源：转载

供稿：网友

Js实现图片上传前的预览功能，主要是使用html5 的 Files API实现，ie可兼容部分功能，在火狐和chrome下正常运行。HTML5的 file input标签支持multiple 和 accept ，前一个属性可控制多文件选择，后一个控制上传的文件类型。预了解更多关于File API的资料，有自己查下。

<title>图片上传预览</title><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.appendChild(img);			//fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')";		}	}</script>

上一篇：Metro风格瀑布流，html5代码

下一篇：css3实现人性化的语言提示框效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注