我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文描述的前端预览图片的功能,其实在以前的文章里面都讲过,这里就是再次做一下方案总结。本文共采用了两种方案来解决图片预览的问题。

苏南大叔:网页图片上传,上传前如何前端预览图片?两种方案最佳实践 - 前端预览图片
网页图片上传,上传前如何前端预览图片?两种方案最佳实践(图2-1)

苏南大叔的程序如此灵动博客,记录苏南大叔和计算机代码的故事。测试环境:谷歌浏览器@108.0.5359.125。

files对象

本文依然对接的是files对象,这个对象的获得方式目前有两种。

【第一种】是通过input type='file'文件上传组件来获得。范例代码:

document.getElementById("file_input").files

参考文字:
https://newsn.net/say/jquery-upload.html

【第二种】是通过拖拽上传的e.dataTransfer对象来获得。范例代码:

e.dataTransfer.files

参考文字:
https://newsn.net/say/js-drag-upload.html

解析files[0]

拿到的files对象是个数组,取出其中的目标对象file(一般来说是第零个对象)。可以通过file.type来判断文件类型。如果是图片,就可以继续后面的逻辑。

var file = files[0];
if (!file.type.startsWith("image/")) {
  return;
}

预览图片获得src

为了预览图片,就必须获得图片的src,这里有两种方案。

苏南大叔:网页图片上传,上传前如何前端预览图片?两种方案最佳实践 - 图片预览逻辑代码
网页图片上传,上传前如何前端预览图片?两种方案最佳实践(图2-2)

【第一种】是通过FileReader获得base64数据:

let reader = new FileReader();
reader.readAsDataURL(file);       //转化为base64
reader.onload = function (e) {
  document.getElementsByTagName("img")[0].src = e.target.result;
  // document.getElementsByTagName("img")[0].src = reader.result;
}

参考文章:
https://newsn.net/say/js-filereader.html

【第二种】是通过blob的虚拟资源URL。参考代码:

var url = window.URL.createObjectURL(file);
document.getElementsByTagName("img")[0].src = url;

结束语

更多js相关经验文字,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js