为什么此表单在选择文件时不自动提交


Why Isn't This Form Auto-Submitting Upon File Select?

下面是页面的代码,但是,您将在头部看到我放入javascript的标题,该脚本应该检查是否有通过位于代码底部的文件上传输入字段选择的文件。 在检测到文件选择后,它应该自动提交表单,但由于某种原因它不会自动提交。 为什么这不起作用? 提前感谢!

JavaScript: (head

<head>
    <script type="text/javascript">
        document.getElementById("photofield").onchange = function() {
            document.getElementById("form").submit();
        }
    </script>
</head>

网页(表单):

<form enctype="multipart/form-data" action="photoupload.php" method="post" id="form">
    <input type="hidden" name="MAX_FILE_SIZE" value="524288">
    <p><input id="photofield" type="file" name="upload" /></p>
    </fieldset>
    <div align="center"><input type="submit" name="submit" value="Submit" /></div>
    <input type="hidden" name="submitted" value="TRUE" />
 </form>
这是因为

您有一个名称为 submit 的输入元素 ( submit button ),这就是问题所在,如果您将提交按钮的名称更改为 submit 以外的其他名称,那么它将起作用,例如,将您的提交按钮代码更改为 btn_submit 而不是 submit

<input type="submit" name="btn_submit" value="Submit" />

现在试试这个

window.onload = function(){
    document.getElementById("photofield").onchange = function() {
        document.getElementById("form").submit();
    };
};

名称为 submit ,它会抛出以下错误

Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

它设置了一个属性submit HTMLFormElement,因此无法执行表单元素prototypesubmit的方法,请检查此工作示例(仅在Chrome中测试)。

此外,在窗口加载(也读取 addEventListener 并读取此内容)事件时注册事件也很重要,因为当您的代码在 head 部分中运行时,表单不可用,并且会引发以下错误

Cannot set property 'onchange' of null