js图片上传预览

最新推荐文章于 2025-08-15 09:01:53 发布

影月寒星

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

分类专栏：前端js 文章标签：图片 javascript

本文链接：https://blog.youkuaiyun.com/u013273648/article/details/77574497

前端js 专栏收录该内容

1 篇文章

订阅专栏

html部分代码：

<span>图片</span>
<img src="" id="imgs">              //预览图片出现的位置
<input type="file" onchange="previewFile()" name="img">

js部分代码：

<script>

//图片预览
          function previewFile() {
              var preview = document.getElementById('imgs');
              var file  = document.querySelector('input[type=file]').files[0];
              var reader = new FileReader();
              reader.onloadend = function () {
                  preview.src = reader.result;
              }
              if (file) {
                  reader.readAsDataURL(file);
              } else {
                  preview.src = "";
              }
          }
</script>