Js实现图片上传前的预览功能，主要是使用html5 的 Files API实现，ie可兼容部分功能，在火狐和chrome下正常运行。HTML5的 file input标签支持multiple 和 accept ，前一个属性可控制多文件选择，后一个控制上传的文件类型，转自源码爱好者 上传图片试试

代码如下： <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>