URL.createObjectURL 实现本地图片预览 | Tinyuen 是小虎啊🐯

<head>
  <script src="./image-previewer.js"></script>
</head>

<!--文件选择-->
<input type="file" id="file">

<!--显示预览的图片-->
<div id="container"></div>

<script>
  window.onload = function () {
    imgPreviewer();  
  }
</script>

image-previewer.js

function imgPreviewer () {
  document.getElementById('file').onchange = function (e) {
    var ele = document.getElementById('file').files[0];
    var createObjectURL = function (blob) {
      return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
    };

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

    document.getElementById('container').innerHTML = '';
    document.getElementById('container').appendChild(pvImg);
  }
}

以上就是代码的关键部分，只保留的精简的逻辑。在实际项目中使用时候，需要增加一些容错的判断，比如文件的后缀名判断，或者文件大小的限制等等。大家自行补全即可。

文件本地预览还有一个比较方便的 API 就是 FileReader ，大家可以去看下，使用也是比较简单的。

推荐文章

英姿勃勃的莲藕 · 【异常记录(五)】C# 无法发送具有此谓词类型的内容正文错误_c# restclient无法发送具有此谓词类型的内容正文

1 月前

俊逸的电脑桌 · 解答：可以使用IP代替域名直接访问吗-阿里云帮助中心

4 周前

奋斗的麦片 · 将 JSON 推送到外部网站—处理事件数据(10.7.1) | ArcGIS Enterprise 文档

3 周前

坐怀不乱的大葱 · Android Kotlin+Data Bindingでビルドエラーに陥った話 #annotation - Qiita

2 周前

完美的鸵鸟 · 原生JavaScript获取URL参数 | 开飞机的老张

1 周前

爱搭讪的烤面包 · Back slash n doesn't work for me. (Example) | Treehouse Community

3 月前

痛苦的企鹅 · 查找视频文件中是否有音频-腾讯云开发者社区-腾讯云

6 月前

飞翔的开心果 · OPENJSON (Transact-SQL) - SQL Server | Microsoft Learn

8 月前

酷酷的火柴 · 纸条app免费下载-纸条最新版v6.1.10 下载 - 263软件园

9 月前

博学的显示器 · 非maven项目快速转换为maven项目的方法步骤_java_脚本之家

10 月前