<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片预览</title> </head> <body> <!-- 文件上传在现代浏览器是基于FileReader API 基于浏览器的安全策略,file标签在现在浏览器中已获取不到真实路径。而低版本ie可以获取到真实路径 FileReader有四种读取文件的方式 1.readAsBinaryString读取为二进制码 2.readAsDataURL 读取为DataURL 3.readAsText读取为文本 4.readAsArrayBuffer 读取为队列缓存 图片上传后的需求,需要将图片读取为DataURL,DataURL的固定格式, 例如:data:[文件格式];base64,[文本流base64编码] 1.jpg格式: data:image/jpeg;base64,/9j/4... 2.png:data:image/png;base64,iVBORw... 3.gif:data:image/gif;base64,R0IGOD... --> <input id="files" type="file" onchange="previewImage(this,'prvid')",multiple="multiple"/> <div id="prvid">预览容器</div> </body> <script type="text/javascript"> function previewImage(file,prvid){ /* file:file控件 prvid:图片预览容器 */ var tip = "Expect jpg or png or gif!"; var filters = { "jpeg":"/9j/4", "gif":"R0IGOD", "png":"iVBORw" }; var prvbox = document.getElementById(prvid); prvbox.innerHTML = ""; //浏览器支持FileReader if(window.FileReader){ for(var i=0,f;f=file.files[i];i++){ var fr = new FileReader(); fr.onload = function(e){ var src = e.target.result; //验证没通过 if(!validateImg(src)){ alert(tip); }else{ //验证通过 showPrvImg(src); } }; fr.readAsDataURL(f); } //浏览器不支持FileReader }else{ if(!/.jpg$|.png$|.gif$/i.test(file.value)){ alert(tip); }else{ showPrvImg(file.value); } } //验证图片 function validateImg(data){ var pos = data.indexOf(",")+1; for(var e in filters){ if(data.indexOf(filters[e])===pos){ return e; } } return null; } //展示图片 function showPrvImg(src){ var img = document.createElement("img"); img.src = src; prvbox.appendChild(img); } } </script> </html>