DDR爱好者之家

浅谈js图片前端预览之filereader和window.URL.createObjectURL
站长资源 2024/11/29 佚名
70 1538
DDR爱好者之家 Design By 杰米

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

//preview img ： filereader方式
  document.getElementById('imgFile').onchange = function(e){ 5     var ele = document.getElementById('imgFile').files[0];

    var fr = new FileReader();
    fr.onload = function(ele){

      var pvImg = new Image();
      pvImg.src = ele.target.result;
      pvImg.setAttribute('id','previewImg');

      $('.preview_wrap').html('').append(pvImg);18     }
    fr.readAsDataURL(ele);
  }
//preview img ： URL.createObjectURL 方式
  document.getElementById('imgFile').onchange = function(e){
    var ele = document.getElementById('imgFile').files[0];

    var createObjectURL = function(blob){
     return window[window.webkitURL "" width="719" height="370" src="/UploadFiles/2021-04-02/201606300904204.png">


继续百度（google最近公司FQ不稳定，没法用），结果看到有人遇到类似奇怪问题，但是没有解决。


无意间却发现图片预览除了filereader还可以用url.createObjectURL。晚上11点26，先赶最后一班地铁。


=====================


第二天一早，把半夜的灵感实验了下，根据判断input file的图片类型，如果不存在就给文件手动赋值类型。（见下方调试用代码，有点乱）


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


结果发现file的type并不是你直接赋值就可以改变的，没有用！


于是开始实践URL.createObjectURL (见最上面的第二部分代码)


神奇！发现预览正常！


查看代码发现，createObjectURL得到的是一个http格式的文件，即使input file的文件类型不存在也不会编码失败。


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


以上这篇浅谈js图片前端预览之filereader和window.URL.createObjectURL就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米