js图片前端预览之 filereader 和 window.URL.createObjectURL

 1 //preview img
 2     document.getElementById(‘imgFile‘).onchange = function(e){
 3         common.showLoading();
 4         activateButton();
 5         var ele =  document.getElementById(‘imgFile‘).files[0];
 6 
 7 
 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);
16             $(‘#closePreview‘).show();
17             common.hideLoading();
18         }
19 
20         fr.readAsDataURL(ele);
21     }

 1 //preview img
 2     document.getElementById(‘imgFile‘).onchange = function(e){
 3         common.showLoading();
 4         activateButton();
 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);
17         $(‘#closePreview‘).show();
18         common.hideLoading();
19 
20 
21     }