js兼容火狐显示上传图片预览效果

 

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>

 

效果：

 

posted @ 2017-07-14 16:45  戈博折刀  阅读(169)  评论(0)  编辑  收藏  举报