标签:
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>
标签:
原文地址:http://www.cnblogs.com/inc-is-include/p/5006748.html