开发者问题收集

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

2021-04-14
97
javascript html frontend

因此，我尝试设置一个图像选择区域，用户可以在其中选择图像，然后在“选择图像”按钮下方预览所选图像。这是我的 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：无法读取 null 的属性“addEventListener” 。

错误屏幕截图

我也尝试使用 input.onchange ： 

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

，但它也没有用，并且它给出了类似的错误消息： Uncaught TypeError：无法设置 null 的属性“onchange”

错误截图

那么我该如何解决这个问题呢？

3个回答

vanilla JS 不使用 # 字符作为 id

从 

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

更改为 

let chooseImg = document.getElementById('myFile');
Mòe
2021-04-14

您可以使用 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>
vanowm
2021-04-15

使用 FileReader。您需要创建 FileReader 实例，将设置图像 src 的函数放入该实例的 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>
Mòe
2021-04-15