码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-11-30 13:03:51      阅读:407      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

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

标签:

原文地址:http://www.cnblogs.com/inc-is-include/p/5006748.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!