Невозможно получить изображение при использовании onsubmit в форме вместо onchange - PullRequest
Новая
       7

Невозможно получить изображение при использовании onsubmit в форме вместо onchange

0 голосов
/ 09 ноября 2019

Я хочу загрузить изображение, мой код был настроен таким образом, чтобы при открытии изображения оно немедленно отправляло запрос XMLHttpRequest и изображение было загружено.

Теперь мне нужно изменить это и использовать дополнительныйкнопка с типом submit вместо. Однако, как только я это сделаю, изображение, кажется, больше не загружается правильно.

Это форма: 

<form id="profileImgForm">                      
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Finalize Upload">
</form>

, и это javascript, который работает, используя onchange в качестве метода:

var imgfile = "";

document.getElementById("profileImgForm").onchange = function(e) {
    e.preventDefault(); 
    if(e.target.files.length > 0) {
        imgfile = e.target.files[0];
    }
}

Это работает, но мне нужно реагировать на onsubmit. Однако, если я изменю его на onsubmit, файл изображения больше не будет найден.

Я открываю изображение на входе fileToUpload и затем нажимаю кнопку отправки. Однако теперь я получаю сообщение об ошибке типа cannot read property 'length' of undefined, что означает, что файл изображения не может быть найден по какой-либо причине.

Кто-нибудь знает, почему это больше не работает при использовании onsubmit, как я могу получить изображениефайл. Спасибо за вашу помощь!

1 Ответ

1 голос
/ 09 ноября 2019

Для onchange e.target является элементом ввода файла, но для onsubmit e.target является всей формой. Вы можете использовать e.target[0].files[0] или получить элемент ввода файла по его идентификатору.

...