选择文件后如何自动提交上传表单？

IT技术 javascript html
2021-02-07 15:41:22

我有一个简单的文件上传表单。选择文件后如何使其自动提交？我不希望用户必须单击提交按钮。

6个回答

您可以submit在onchange输入文件时简单地调用表单的方法。

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

http://jsfiddle.net/cwvc4/73/

@henrywright：是的。在 jQuery 中，Submit()调用会触发 jQuerysubmit事件，但不会触发底层表单submit()。您当然可以使用$('form')[0].submit()jQuery 来点击 DOM 元素
2021-03-18 15:41:22
这在 Safari 中有效，因为 jQuery 解决方案似乎不起作用。奇怪的？
2021-03-25 15:41:22

只需告诉file-input 在任何更改时自动提交表单：

<form action="http://example.com">
    <input type="file" onchange="form.submit()" />
</form>

此解决方案的工作方式如下：

  • onchange使输入元素在value修改时执行以下脚本
  • form 引用表单，该输入元素是其中的一部分
  • submit() 使表单将所有数据发送到 URL，如在 action

该解决方案的优点：

  • 无需ids 即可工作。如果在一个 html 页面中有多个表单，它会使生活更轻松。
  • 原生javascript，不需要 jQuery 或类似工具。
  • 代码在html-tags 中。如果您检查 html，您将立即看到它的行为。

使用jQuery：

$('#file').change(function() {
  $('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="file" id="file" value="Go" />
</form>

另外，stackoverflow 上也有同样的问题：stackoverflow.com/questions/4704154/...
2021-03-24 15:41:22
@ErdalG：下面添加了工作 jQuery 版本。它避免了这个问题。
2021-03-31 15:41:22
这种方法在 Safari 中有效吗？我不确定。我已经测试了 Chrome、IE 和 FF，它们都可以正常工作。
2021-04-12 15:41:22

带有onchange事件的JavaScript ： 

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

jQuery .change()和.submit()： 

$('#fileInput').change(function() {
  $('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
     <input type="file" id="fileInput">
</form>

如果您投反对票，请添加评论以明确问题或应该改进的地方。
2021-04-14 15:41:22

最短的解决方案是

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
怎么样 onchange="this.form.submit()"
2021-03-25 15:41:22
怎么样onchange="form.submit()"？:)
2021-04-13 15:41:22
其它你可能感兴趣的问题
上一篇在 AngularJs 中使用 Jquery 数据表 下一篇如何导入单个 Lodash 函数？