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 ，大家可以去看下，使用也是比较简单的。

推荐文章

直爽的上铺 · 用JSONExport一键生成JSON Model | 萤火之森

2 周前

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

1 周前

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

6 天前

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

昨天

难过的盒饭 · 阿富汗的南北民族内斗，为什么停不下来？

1 年前

爱看书的鼠标垫 · Showcar Mercedes-AMG Project ONE

1 年前

爱热闹的金针菇 · 【电台文本】我有认真的爱过你，但现在的离开也是认真的- 知乎

1 年前

慷慨的包子 · 山东潍坊这个地方怎么样? - 知乎

1 年前

怕老婆的柠檬 · 高中数学立体几何如何学

1 年前