网页图片上传，上传前如何前端预览图片？两种方案最佳实践

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

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

苏南大叔的平行空间笔记本博客，记录苏南大叔和计算机代码的故事。测试环境：谷歌浏览器@108.0.5359.125。

files对象

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

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

document.getElementById("file_input").files

参考文字：
https://seosn.com/say/jquery-upload.html

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

e.dataTransfer.files

参考文字：
https://seosn.com/say/js-drag-upload.html

解析files[0]

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

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

预览图片获得src

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

【第一种】是通过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://seosn.com/say/js-filereader.html

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

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

结束语

更多js相关经验文字，请点击：

• https://seosn.com/tag/js/

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