Установить элемент входного файла с файлом с помощью API файлов HTML5

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

Мне удалось установить атрибут "files" входного элемента с свойством files объекта dataTransfer.

document.getElementById( "insert input file id" ). files = evt.dataTransfer.files;

Я просто попытался использовать getelement.value и его ошибки. Задайте свойство файлов в списке файлов.

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

Kremnari

Ответ 3

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