Установить элемент входного файла с файлом, используя HTML5 File API

Question

Я использую элемент входного файла для загрузки файла на мою страницу JSP. Пользователь может загрузить файл, нажав на кнопку, которая открывает форму с кнопкой обзора браузера

Теперь я хочу загрузить файл с помощью функции перетаскивания HTML5 (как описано на странице * html5 ). Я могу извлечь имя файла с помощью File API. Есть ли способ загрузить элемент входного файла с удаленным файлом, используя File API? (Чтобы я мог использовать то же поведение для загрузки файла)

Answer 1

Нет способа установить значение <input type=file> непосредственно в JS.Это действие требует вмешательства пользователя (и щелчка по средству выбора файлов).Однако вы можете использовать xhr.send(FormData) или xhr.send(File) для отправки файлов.Смотрите мой ответ здесь:

HTML5 File API readAsBinaryString считывает файлы намного большего размера, отличные от файлов на диске

В обработчике перетаскивания просто вставьте FileList полученныйот evt.dataTransfer.files до этого uploadFiles() помощника.

Answer 2

Мне удалось установить атрибут «files» элемента input с помощью свойства files объекта dataTransfer.

document.getElementById («вставить идентификатор входного файла»). Files = evt.dataTransfer.files;

Я только что попытался использовать getelement.value, и это ошибки. Установите свойство files с помощью списка файлов.

Счастливого программирования!

Kremnari

Answer 3

действительно невозможно обработать что-либо, связанное с клиентом в javascript.Однако вы можете использовать файл api для преобразования изображения в base64 .Затем вы можете отправить это значение на сервер через форму и скрытое входное значение (или созданное с помощью javascript), декодировать его на php или на любом используемом вами серверном языке и сохранить как файл изображения.