javascript - 如何预览从文件输入中选择的图像？（如何检测用户何时选择文件以便预览给定的图像？）

Question

所以我试图设置一个图像选择区域，用户在其中选择图像，然后在“选择图像”按钮下方预览所选图像。这是我的html：

<form action="#" id="submitImg">
    <!--Customize the file selection button-->
    <label for="myFile" id="chooseFileBtn"><i class="fas fa-plus"></i>Choose an Image</label><br>
    <input type="file" id="myFile" name="filename" hidden>
    <!--<img> element where the selected image should appear-->
    <img src="#" id="imgPreview">
    <input type="submit" id="submitImage">
</form>

我试过使用input.addEventListener()：

let chooseImg = document.getElementById('#myFile');
chooseImg.addEventListener("change", function(event) {
  document.getElementById('imgPreview').src = document.getElementById('myFile').value;
}, false);

但它不起作用，并且检查元素说Uncaught TypeError: Cannot read property 'addEventListener' of null。

错误截图

我也尝试过使用input.onchange：

let chooseImg = document.getElementById('#myFile');
chooseImg.onchange = function(event) {
  document.getElementById('imgPreview').src = document.getElementById('myFile').value;
}

，但这也不起作用，并且给出了类似的错误消息： Uncaught TypeError: Cannot set property 'onchange' of null

错误截图

那么我应该怎么做呢？

Answer 1

vanilla JS不使用#字符作为id

从改变

let chooseImg = document.getElementById('#myFile');

至

let chooseImg = document.getElementById('myFile');

Answer 2

您可以使用URL.createObjectURL()

let chooseImg = document.getElementById('myFile'),
    img = document.getElementById('imgPreview'),
    finished = function(e)
    {
      URL.revokeObjectURL(img.src); //clean up
    };

img.onload = finished;
img.onerror = finished;

chooseImg.addEventListener("change", function(e)
{
  img.src = URL.createObjectURL(e.target.files[0]);
}, false);

<form action="#" id="submitImg">
    <!--Customize the file selection button-->
    <label for="myFile" id="chooseFileBtn"><i class="fas fa-plus"></i>Choose an Image</label><br>
    <input type="file" id="myFile" name="filename" hidden>
    <!--<img> element where the selected image should appear-->
    <img src="#" id="imgPreview">
    <input type="submit" id="submitImage">
</form>

Answer 3

使用文件阅读器。您需要创建 FileReader 的实例，将函数 set src for image 放入该实例的事件onload

let chooseImg = document.getElementById('myFile');
chooseImg.addEventListener("change", function(event) {
  var fileInput = document.getElementById('myFile')

  readURL(fileInput)
  document.getElementById('imgPreview').src = document.getElementById('myFile').value;
}, false);

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      document.getElementById('imgPreview').src = e.target.result

    };

    reader.readAsDataURL(input.files[0]);
  }
}

<form action="#" id="submitImg">
  <!--Customize the file selection button-->
  <label for="myFile" id="chooseFileBtn"><i class="fas fa-plus"></i>Choose an Image</label><br>
  <input type="file" id="myFile" name="filename" hidden>
  <!--<img> element where the selected image should appear-->
  <img src="#" id="imgPreview">
  <input type="submit" id="submitImage">
</form>