zoukankan      html  css  js  c++  java
  • 两种方式实现图片上传在线预览

    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     }
  • 相关阅读:
    Go标准库之tar
    redis必知必会
    GORM CRUD指南
    GORM入门指南
    MUI中tap点击事件点击一次连续申请两次
    Go代码启动默认浏览器
    Go实现JWT
    Go Micro
    protobuf初识
    英语作文
  • 原文地址:https://www.cnblogs.com/fordouble/p/6993914.html
Copyright © 2011-2022 走看看