两种方式实现图片上传在线预览

最新推荐文章于 2022-10-02 13:08:46 发布

weixin_30752699

最新推荐文章于 2022-10-02 13:08:46 发布

阅读量234

点赞数

原文链接：http://www.cnblogs.com/fordouble/p/6993914.html

版权

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     }

转载于:https://www.cnblogs.com/fordouble/p/6993914.html