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

我想上传图片,我的代码已经设置好,因此当我打开图片时,它会立即发送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时这不再起作用了,我如何获得图像文件。感谢您的帮助!

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

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

本文链接:https://www.f2er.com/3131529.html

大家都在问