javascript - 在 Javascript 中显示文件输入中的图像

Question

当有人使用文件输入服务完成选择文件时，我需要运行一个函数。我所说的“文件输入服务”是指:

<input type="file" name = "foo" id="foo">

我尝试以各种方式执行此操作，首先创建一个表单并使用其他技术，但似乎没有任何效果。有多种方法可以检测该物体是否有某些东西，例如使用:

document.getElementById("foo").files[0]

如果您运行它，它只会返回一个值，但我无法不断地编译 while 语句来执行此操作。

Answer 1

纯 JavaScript

您可以使用纯 JavaScript，如下所示。这段代码基本上使用document.getElementById()获取输入元素，和 .addEventListener()和 change当输入字段更改时执行某些操作。

document.getElementById("foo").addEventListener("change", function() {
  console.log("Changed");
});

<input type="file" name="foo" id="foo">

jQuery

使用 jQuery .change() 。基本上，当输入更改(添加文件)时，此代码将 console.log“更改”。

$("#foo").change(function() {
  console.log("Changed");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="foo" id="foo">