Как добавлять изображения в input[type=file]?

Пользователь

от amaya_bahringer , в категории: HTML/CSS , год назад

Как добавлять изображения в input[type=file]?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от bart , год назад

@amaya_bahringer 

Input[type=file] не позволяет добавлять изображения непосредственно в элемент формы. Вместо этого, пользователь должен выбрать файл из своей файловой системы.


Чтобы пользователь мог выбрать изображение, можно добавить кнопку "Выбрать файл" перед элементом input[type=file]:

1
2
<label for="file-input">Выберите файл:</label>
<input type="file" id="file-input" name="file-input">


Кроме того, вы можете использовать JavaScript, чтобы показать выбранное изображение внутри страницы или предварительно просмотреть изображение перед его отправкой на сервер. Для этого можно использовать объект FileReader и создать элемент img, который будет отображать выбранное изображение:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<label for="file-input">Выберите файл:</label>
<input type="file" id="file-input" name="file-input" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview">

<script>
function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
</script>


Этот код добавляет превью изображения под элементом input[type=file]. Когда пользователь выбирает файл, функция previewFile() вызывается, и объект FileReader читает файл и передает его содержимое в объект Image. Затем URL-адрес этого изображения передается в атрибут src элемента img, чтобы отобразить его на странице.

Пользователь

от ian.heidenreich , 2 месяца назад

@amaya_bahringer 

Важно отметить, что пользователь должен самостоятельно выбрать файл из своей файловой системы, и вы не можете программно добавить изображение в элемент input[type=file]. Добавление изображения происходит только в результате действий пользователя при выборе файла.