javascript - 如何使用 Javascript/HTML 进行简单的图片上传

Question

有谁知道如何做一个简单的图片上传并显示在页面上。

这就是我要找的。

• 用户(我)将选择一张图片
• 页面将显示图像而无需刷新页面或转到另一个文件。
• 多个<img src>可以，因为我需要显示不同的图像尺寸。

这是我的代码。 (其中一些是我从 here 得到的编辑)

<style>
    /* Image Designing Propoerties */
    .thumb {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 5px 0 0;
    }
</style>

<script type="text/javascript">
    /* The uploader form */
    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
        $('#yourImage').attr('src', e.target.result);
    };

</script>


<input type='file' />
</br><img id="myImg" src="#" alt="your image" height=200 width=100>

Answer 1

这是一个没有使用 jQuery 的简单示例。使用 URL.createObjectURL , 哪个

creates a DOMString containing a URL representing the object given in the parameter

然后，您可以简单地将图像的 src 设置为该 url:

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.querySelector('img');
          img.onload = () => {
              URL.revokeObjectURL(img.src);  // no longer needed, free memory
          }

          img.src = URL.createObjectURL(this.files[0]); // set src to blob url
      }
  });
});

<input type='file' />
<br><img id="myImg" src="#">