在表单中使用onsubmit而不是onchange时无法获取图像

Question

我想上传图像，我的代码已经设置好，因此当我打开图像时，它立即发送XMLHttpRequest并上传了图像。

现在，我需要对此进行更改，并使用类型为submit的其他按钮代替。但是，一旦执行此操作，该图像似乎就无法正确加载。

这是表格：

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

这是使用onchange作为方法的javascript：

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时这不再起作用了，我如何获取图像文件。感谢您的帮助！

Answer 1

对于onchange，e.target是文件输入元素，但是对于onsubmit，e.target是整个表单。您可以使用e.target[0].files[0]或按其ID获取文件输入元素。