在 Javascript 中显示来自文件输入的图像

【问题标题】：Displaying images from file inputs in Javascript在 Javascript 中显示来自文件输入的图像
【发布时间】：2019-03-07 00:58:06
【问题描述】：

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

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

我尝试了多种方式来做到这一点，首先是通过创建一个表单来做到这一点并使用其他技术，但似乎没有任何效果。有几种方法可以检测事物是否有东西，例如使用：

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

这只会在你运行它时返回一个值，但我不能不断地编译一个 while 语句来执行此操作。

【问题讨论】：

【解决方案1】：

纯 Javascript

您可以使用纯 javascript，如下所示。这段代码基本上使用document.getElementById()获取输入元素，.addEventListener()和change在输入字段发生变化时做一些事情。

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

&lt;input type="file" name="foo" id="foo"&gt;

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

【讨论】：