图片上传后即时预览 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 5         //设置图片上传后预览的div样式
 6         <style type="text/css">
 7             #preview, .img, img
 8             {
 9             width:200px;
10             height:200px;
11             }
12             #preview
13             {
14             border:1px solid #000;
15             }
16         </style>
17     </head>
18     <body>
19         <div id="preview"></div>
20         <input type="file" onchange="preview(this)" />
21         //图片上传和预览
22         <script type="text/javascript">
23             function preview(file)
24             {
25             var prevDiv = document.getElementById('preview');
26             if (file.files && file.files[0])
27             {
28             var reader = new FileReader();
29             reader.onload = function(evt){
30             prevDiv.innerHTML = '
31             <img src="' + evt.target.result + '" />
32             ';
33             }
34             reader.readAsDataURL(file.files[0]);
35             }
36             else
37             {
38             prevDiv.innerHTML = '
39             <div class="img"
40                 style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>
41             ';
42             }
43             }
44         </script>
45     </body>
46 </html>

 

posted @ 2016-07-25 11:02  魔流剑  阅读(348)  评论(0)    收藏  举报