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

【问题标题】：Why Isn't This Form Auto-Submitting Upon File Select?为什么此表单不会在文件选择时自动提交？
【发布时间】：2013-11-02 05:12:11
【问题描述】：

下面是页面的代码，但是，您会在头部看到我已经放入了 javascript，它应该检查是否通过位于底部的文件上传输入字段选择了一个文件代码。在它检测到文件选择后，它应该自动提交表单，但由于某种原因它没有自动提交。为什么这不起作用？提前致谢！

JavaScript：（在head）

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

HTML（表单）：

<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>

【问题讨论】：

尝试document.getElementById("form").trigger('submit'); 而不是document.getElementById("form").submit();

标签： javascript php html file upload

【解决方案1】：

这是因为您有一个名称为 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，因此form元素的prototype中的方法submit无法执行，请检查this working example（仅在Chrome中测试过）。

此外，在窗口onload 上注册事件也很重要（也请阅读addEventListener 和this）事件，因为当您的代码在head 部分中运行时该表单不可用，它会抛出以下错误

Cannot set property 'onchange' of null

【讨论】：