时间戳

首页 > 解决方案 > 在表单中使用 onsubmit 而不是 onchange 时无法获取图像

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

问题描述

我想上传一张图片，我的代码设置为当我打开图片时它会立即发送一个 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，我如何获取图像文件？

标签： javascripthtmlformssubmit

解决方案

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

推荐阅读