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

Question

我想上传图片，我的代码已设置为当我打开图片时它会立即发送 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 时可能不再起作用，我如何获取图像文件？

Answer 1

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

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

Cannot get image when using onsubmit in form instead of onchange

javascript

html

forms

submit