js图片预览方式

有2种方式:filereader 和 window.URL.createObjectURL 。

 1 //preview img : filereader方式
 2     document.getElementById('imgFile').onchange = function(e){
 5         var ele =  document.getElementById('imgFile').files[0];
 6 
 8         var fr = new FileReader();
 9         fr.onload = function(ele){
10 
11             var pvImg = new Image();
12             pvImg.src = ele.target.result;
13             pvImg.setAttribute('id','previewImg');
14 
15             $('.preview_wrap').html('').append(pvImg);
18         }
20         fr.readAsDataURL(ele);
21     }
 1 //preview img : URL.createObjectURL 方式
 2     document.getElementById('imgFile').onchange = function(e){
 5         var ele =  document.getElementById('imgFile').files[0];
 6 
 7         var createObjectURL = function(blob){
 8           return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
 9         };
10         var newimgdata = createObjectURL(ele);
11 
12         var pvImg = new Image();
13         pvImg.src = newimgdata;
14         pvImg.setAttribute('id','previewImg');
15 
16         $('.preview_wrap').html('').append(pvImg);
21     }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、图片预览 图片预览有两种方式: 用 FileReader把图片转化为base64格式的数据嵌入到HTML中。 ...
    Lxylona阅读 2,898评论 0 4
  • 玖之/文 偶然间,想到朋友一直喜欢用“千里孤坟”这个名字...
    玖之阅读 923评论 0 2
  • 有时困住我们的不是命运。是诸多现实和顾虑。 现在看似年青的我们。其实已经身经百炼了。而这样的我们却越发的胆怯。不敢...
    已醉阅读 183评论 0 0
  • 亲子日记第34天 今天是五一劳动节,本来今天的计划是去寿光看蔬菜展览的,可是早上起来看着外面在下雨就没有去,...
    e3e0025147a7阅读 117评论 0 0