时间戳

首页 > 解决方案 > 在 Javascript 中显示来自文件输入的图像

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

问题描述

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

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

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

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

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

标签： javascriptfileinput

解决方案

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

推荐阅读