如何使用 JavaScript 提交“文件”输入而不使用提交按钮？

Question

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

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

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

Answer 2

是的，您可以将以下内容添加到文件输入的

onchange

事件中：

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

这会在用户选择文件后立即提交表单。 但是，用户无法在提交之前更正错误的选择 - 请务必检查这是否真的明智。

Answer 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 级来实现。

Answer 4

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

Answer 5

我不确定以 HTML 表单执行此操作有什么限制。

但是，您可以使用 Flash 来实现。 Gmail 就是这样做的 - 当我单击“附加文件”时，系统会提示我显示一个文件浏览对话框，当我确定该对话框时，上传会立即开始，并且还会显示一个进度条。

谷歌搜索“Flash uploader”会给你很多选择，但我对其中任何一个都没有经验。

Answer 6

这里在输入中添加事件监听器的解决方案对我来说不起作用，所以我找到了另一个解决方案，我想分享它。

HTML：

    <form id="attachUpload" method="POST"  action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
<input id="uploadAttachment" type="file" name="files[]" placeholder="Computer" multiple />
</form>

提交表单的代码：

$(document).on('change', '#uploadAttachment', function() {
$('#attachUpload').trigger('submit');

});

如果您想在提交表单后发布该数据：

$(document).on('submit', '#attachUpload', function(e) {
// code here
})

Answer 7

第 1 部分（共 7 部分）

在练习的第 14 步之后提交包含争论脚本的文本文件。

上传文件

未提交文件

第 2 部分（共 7 部分）

在练习的第 46 步之后提交包含仪表板屏幕快照的文档。

上传文件

未提交文件

第 3 部分（共 7 部分）

在练习的第 51 步之后提交包含仪表板屏幕快照的文档。

上传文件

未提交文件

第 4 部分（共 7 部分）

在练习的第 66 步之后提交包含仪表板屏幕快照的文档。

上传文件

未提交文件