Вручную вызвать событие «изменение» на входе с полезной нагрузкой - PullRequest
Новая
       14

Вручную вызвать событие «изменение» на входе с полезной нагрузкой

0 голосов
/ 24 октября 2019

Я выполняю перетаскивание файла загрузки для элемента ввода, но у меня есть некоторые трудности с обработкой события перетаскивания. У меня есть следующий HTML: 

<label for="input" id="label" ondrop="handleDrop(event)">
    <input id="input" type="file" name="file"/>
    <span>Choose a file or drag it here.</span>
</label>

и следующие js: 

let label = document.getElementById('label');
let input = document.getElementById('input');
label.addEventListener('drop', handleDrop);
input.addEventListener('change', handleChange);

function handleDrop(e) {
    e.preventDefault();
    let file = e.dataTransfer.files;
    console.log(file);
    //and now?
}

function handleChange(e) {
    //default not overwritten
    let fileName = e.target.value.split('\\').pop();
    if (fileName) {
        input.nextElementSibling.innerHTML = fileName;
    }
}

, когда я нажимаю на вход и просматриваю файл, запускается событие «изменение», текстустановить в загруженный файл, а атрибут 'file' установить в этот файл. Я хочу, чтобы то же самое происходило, когда файл сбрасывался на этикетке, но я понятия не имею, как это сделать. Я могу использовать input.dispatchEvent(new Event('change')), но это не доставит файл, который сбрасывается в атрибут файла ввода.

Может быть, я обдумываю эту проблему неправильно, и есть лучшая альтернатива для этого, ноконечной целью, конечно же, является отправка файла на мой сервер, когда я нажимаю кнопку отправки. (Я использую Spring MVC, когда файл перехватывается с помощью @RequestParam("file") Multipartfile file.)

Любая помощь очень ценится:)

1 Ответ

0 голосов
/ 30 октября 2019

Очевидно, что я пытаюсь сделать это невозможно, так как атрибут файла input type="file" доступен только для чтения из соображений безопасности. Правильный способ сделать это, вероятно, будет отправить файл в MVC напрямую.

...