html file选中图片后 不经过服务器 立刻显示在页面

html结构中 file类型加上 onchange事件 ,用FileReader读取图片的data:/images，然后显示在img标签中，

代码如下:

 1 <img class="preview" style="width:150px;" src="<?=IMG_URL.$cost['cover'].'_s.jpg';?>"><br><br>
 2 <input type="file" name="cover" onchange="preview(this)"/>
 3 <script>
 4     function preview(file){  
 5         var prevDiv = document.getElementById('preview');  
 6         if (file.files && file.files[0]){  
 7             var reader = new FileReader();  
 8             reader.onload = function(evt){  
 9             // prevDiv.innerHTML = '<img width="100%" height="100%" id="qw_img" src="' + evt.target.result + '" />';
10             $('.preview').attr('src' , evt.target.result);
11         }    
12              reader.readAsDataURL(file.files[0]);  
13         }else{  
14             // prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';  
15           $('.preview').attr('src' , file.value);
16         }  
17     }  
18 </script>

 

posted @ 2015-11-30 11:39  inc  阅读(2602)  评论(0)  编辑  收藏  举报