input file 显示本地图片

原创于 2021-02-24 15:26:38 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

奇奇怪怪的需求专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何使用HTML的`<input type=file>`元素结合FileReader API，实现在网页上选取本地图片并实时显示。通过JavaScript实现文件读取转换为DataURL，进而动态更新页面上的图片显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input type="file"把一张本地的图片以图片形式显示在页面上

<form action=""
  enctype="multipart/form-data">
  <input id="file"
         class="filepath"
         accept="image/png, image/jpeg, image/gif, image/jpg"
         @change="changepic(this)"
         type="file"><br>
  <img src=""
       id="show"
       width="200">
</form>

changepic () {
  var reads = new FileReader();
  let f = document.getElementById('file').files[0];
  reads.readAsDataURL(f);
  reads.onload = function (e) {
    document.getElementById('show').src = this.result;
  };
},

参考地址：https://blog.youkuaiyun.com/weixin_38023551/article/details/78318532?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=678cd3f0-4155-4e19-b0bf-08aecbcf9e15&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader