当前位置: 首页 > 编程笔记 >

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

顾兴昌
2023-03-14
本文向大家介绍浅谈js图片前端预览之filereader和window.URL.createObjectURL,包括了浅谈js图片前端预览之filereader和window.URL.createObjectURL的使用技巧和注意事项,需要的朋友参考一下

浅谈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 ? 'webkitURL' : 'URL']['createObjectURL'](blob);
    };
    var newimgdata = createObjectURL(ele);

    var pvImg = new Image();
    pvImg.src = newimgdata;
    pvImg.setAttribute('id','previewImg');

    $('.preview_wrap').html('').append(pvImg);
  }

以上先贴出用filereader 和 URL.createObjectURL 两种预览方式。

按照前辈们的说法,creatObjectURL可以有更好的性能,或许是浏览器自带接口的原因, 可以处理的更快。

最近做了一个需要上传图片预览的项目,用的最简单的input file上传,最开始想到的就是用filereader实现前端预览,很简单,见前面的第一段代码,在自己手机上测试,没问题。但在某些奇葩手机上,比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片!但在该手机的微信,浏览器内上传均可以!

看了下代码,如下图,是因为base64编码内缺少了图片格式,手动加上image/jpg图片立即显示,刚开始以为是readAsDataURL的问题,没有编码成功,找了一晚上原因,无解!不知哪根筋搭错突然想到打印出input file的type看看,发现type为空,而file的其他属性均正常。

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

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

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

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

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

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

神奇!发现预览正常!

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

以上这篇浅谈js图片前端预览之filereader和window.URL.createObjectURL就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍浅谈JS之tagNaem和nodeName,包括了浅谈JS之tagNaem和nodeName的使用技巧和注意事项,需要的朋友参考一下 nodeName是节点的属性,tagName是元素的属性。元素是节点的子集。不是任何节点都有tagName的,比如文本节点,仅有nodeName属性。 这个和css中的倾斜和斜体的关系是一样的。不是所有元素都有斜体的,但是都能倾斜。 以上这篇浅谈JS之

  • 本文向大家介绍js实现前端图片上传即时预览功能,包括了js实现前端图片上传即时预览功能的使用技巧和注意事项,需要的朋友参考一下 现在,在实现前端图片即时预览,可以说是一件很简单的事情了。 我们只需要用file对象和FileReader对象,既可以轻松实现,无需下载类库。 HTML代码 先来说说input,input这个元素,具有一个files属性,该属性是一个filelist对象,是file对象的

  • 本文向大家介绍浅谈谈Android 图片选择器,包括了浅谈谈Android 图片选择器的使用技巧和注意事项,需要的朋友参考一下 ImageSelector 简介 Android自定义相册,实现了拍照、图片选择(单选/多选)、ImageLoader无绑定 任由开发者选择 https://github.com/YancyYe/ImageSelector Demo Download Apk 更新内容 U

  • 本文向大家介绍上传图片预览JS脚本 Input file图片预览的实现示例,包括了上传图片预览JS脚本 Input file图片预览的实现示例的使用技巧和注意事项,需要的朋友参考一下 在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意。要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的。幸运的是在这个项目以前有人写过一个图片预览的功能,还被我

  • 本文向大家介绍JS HTML5拖拽上传图片预览,包括了JS HTML5拖拽上传图片预览的使用技巧和注意事项,需要的朋友参考一下 1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件。file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部

  • ap.previewImage(OPTION | urls, CALLBACK) 预览图片。可直接传入一个图片链接数组作为 OPTION.urls 参数。 OPTION 参数说明 名称 类型 必选 描述 urls Array 是 要预览的图片链接列表 current Number 否 当前显示图片索引,默认 0 代码示例 <script src="https://gw.alipayobjects.