js兼容火狐显示上传图片预览效果【谷歌也适用】
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta content="text/html; charset=GBK" http-equiv="Content-Type" /> 6 <title>Image preview example</title> 7 <style type="text/css"> 8 div { 9 width: 100px; 10 height: 100px; 11 border: 1px #A3BFE7 solid; 12 } 13 14 img { 15 width: atuo; 16 height: atuo; 17 } 18 </style> 19 <script type="text/javascript"> 20 function viewPic() { 21 var oFReader = new FileReader(); 22 oFReader.onload = function(e) { 23 document.getElementById("uploadPreview").src = e.target.result; 24 } 25 if(document.getElementById("uploadImage").files.length === 0) { 26 return; 27 } 28 var oFile = document.getElementById("uploadImage").files[0]; 29 oFReader.readAsDataURL(oFile); } 30 </script> 31 </head> 32 33 <body> <input id="uploadImage" type="file" name="myPhoto" onchange='viewPic();' /><br> <img id="uploadPreview" src="" /> </body> 34 35 </html>
效果：
