Отображение изображений из файлов ввода в Javascript

Question

Мне нужно запустить функцию, когда кто-то закончил выбор файла с помощью службы ввода файлов. Под «службой ввода файлов» я имею в виду:

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

Я пытался сделать это различными способами, сначала создав форму для этого и используя другие методы, но, похоже, ничего не работает. Есть несколько способов определить, есть ли у вещи что-то, например, используя:

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

Это возвращает значение, только если вы его запустите, но я не могу постоянно скомпилировать оператор while для этого.

Answer 1

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