Возможно ли прописать свое value в input type file?

106
04 августа 2019, 22:50

Возможно ли добавить свои файлы в input type=file? Имеется ввиду, что записывается в value, когда файлы были добавлены? Т.к. мне нужна возможность менять файлы, которые я буду отправлять (У меня идет drag'n'drop и при drop'e файла я создаю свой массив в который сохраняю fileList и нужно узнать, что из этого массива пойдет в value).

Answer 1

*Перевод данного ответа

*Это возможно если у вас есть dataTransfer или объект FileList

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

Firefox, последним из основных браузеров, добавил возможность, позволяющую нам установить файлы для input полей типа file. Так же согласно W3C тестированию, это осуществимо в Google Chrome.

Соответствуюзий скриншот и текст из MDN:

Вы можете установить, а также получить значение HTMLInputElement.files во всех современных браузерах.
Смотри совместимость здесь MDN

В Firefox обсуждениях ошибок и исправлений есть демо которое вы можете посмотреть И также исходный код если вы хотите это поредактировать. Снизу представлен исполняемый код из этой ссылки:

let target = document.documentElement; 
let body = document.body; 
let fileInput = document.querySelector('input'); 
 
target.addEventListener('dragover', (e) => { 
  e.preventDefault(); 
  body.classList.add('dragging'); 
}); 
 
target.addEventListener('dragleave', () => { 
  body.classList.remove('dragging'); 
}); 
 
target.addEventListener('drop', (e) => { 
  e.preventDefault(); 
  body.classList.remove('dragging'); 
   
  fileInput.files = e.dataTransfer.files; 
});
body { 
  font-family: Roboto, sans-serif; 
} 
 
body.dragging::before { 
  content: "Drop the file(s) anywhere on this page"; 
  position: fixed; 
  left: 0; width: 100%; 
  top: 0; height: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 1.5em; 
  background-color: rgba(255, 255, 0, .3); 
  pointer-events: none; 
} 
 
button, input { 
  font-family: inherit; 
} 
 
a { 
  color: blue; 
}
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
      <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">  
 
  <title>JS Bin</title> 
</head> 
<body> 
   
  <h1>Drag and drop files into file input</h1> 
   
  <p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p> 
   
  <p> 
    <input type="file"> 
  </p> 
 
</body> 
</html>

Важно:

Вы можете сделать это только если у вас есть объект FileList или dataTransfer который вы можете установить для элемента входного файла(так как метод не принимает строки в виде обычно текста).

Для больше информации смотрите здесь: How to set File objects and length property at FileList object where the files are also reflected at FormData object?

Небольшой пример как установить значение для input после того как файл будет сброшен:

document.querySelector('.селектор-вашего-поля-для-дропа')
    .addEventListener('drop', (ev) => {
        ev.preventDefault();
        document.querySelector('.селектор-вашего-input-елемента').files = ev.dataTransfer.files;
    });
READ ALSO
Реализация не повторяющегося рандома
javascript

Реализация не повторяющегося рандома

Есть определенный тест, который генерируют массивы с ответами, но рандом повторяет числа

 127
Не работает translateY() [дубликат]
javascript

Не работает translateY() [дубликат]

На данный вопрос уже ответили:

 101
Значение для динамического элемента
javascript

Значение для динамического элемента

Через URL ко мне приходят параметры со значениями, которые я записываю в массив paramsURL[]Тогда мне нужно установить пришедшие данные как value для...

 111
Проблема отображения Slick Slider
javascript

Проблема отображения Slick Slider

Всем привет, проблема такая, на сайте - https://markuslutrellgithub

 104