如何使用 JavaScript 在没有提交按钮的情况下提交“文件”输入？

Posted 2023-02-22

【中文标题】如何使用 JavaScript 在没有提交按钮的情况下提交“文件”输入？

【英文标题】：How do I submit a "file" input without submit button using JavaScript?

【发布时间】：2010-12-26 15:01:05

【问题描述】：

有没有一种无需点击“提交”按钮即可自动提交表单的方法？

我有一个带有一个“文件”输入的表单。我会在用户选择一个文件后提交表单。

【参考方案1】：

是的，您可以使用form.submit() 函数。在文件输入上添加一个 onchange 侦听器并将其链接到form.submit() 函数，如下所示：

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" onchange="this.form.submit()" name="myFile"/>
</form>

【参考方案2】：

可以，您可以在文件输入的onchange事件中添加以下内容：

<input type='file' .... onchange='this.form.submit();'>

这会在用户选择文件后立即提交表单。 但是，用户不能在提交之前更正错误的选择 - 一定要检查这是否真的很明智。

【参考方案3】：

这个解决方案对我有用。

<form enctype="multipart/form-data" method="POST" action="/upload">
  <input id="myfilefield" type="file" name="file">
  <input type="submit">
</form>

 

document.getElementById('myfilefield').onchange = function() 
  this.form.submit();
;

顺便说一句，您不需要使用闪光灯。 Gmail 通过 XHR 级别 2 执行此操作。

【参考方案4】：

我不相信你能做到这一点。由于存在滥用的可能性，浏览器对您可以对文件上传字段执行的操作非常非常严格。如果用户不小心选择了一个私人文件，他们不希望它立即开始将该文件上传到随机服务器。

【讨论】：

不是真的，我只是在我的答案中测试了代码，它可以工作（至少在 Firefox 中）。

用 IE、Edge、Chrome、Firefox 检查过——没有人会接受这个，而onchange='alert("test");' 很好。相信，这不适用于 enctype multipart/form-data - 这是文件上传工作所必需的。

编辑：***.com/questions/833032/… 这就是重点。不要将提交按钮命名为submit，否则它会因控制台错误submit is not a function 而失败。命名不同，然后它的工作原理。

【参考方案5】：

我不确定在 html 表单中这样做有什么限制。

但是，您可以使用 Flash 来实现。 Gmail 做到了——当我点击“附加文件”时，我会收到一个文件浏览对话框的提示，当我确定该对话框时，上传会立即开始，并且还会给我一个进度条。

谷歌搜索“Flash 上传器”会给你很多选择，但我没有任何使用经验。