用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">