选择文件时如何自动提交上传表单？答案

【问题标题】：How do I auto-submit an upload form when a file is selected?选择文件时如何自动提交上传表单？
【发布时间】：2011-09-06 14:52:18
【问题描述】：

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

【问题讨论】：

如果用户选择了错误的文件怎么办？ IMO，您应该让用户选择何时提交。
@Tyler 大多数人会选择正确的文件，而我正在努力减少用户体验摩擦。对于选择错误文件的人，上传后可以选择删除。
“大多数人”会做出明智的决定，但大多数人不会。
我同意@TylerCrompton，用户会犯最愚蠢的错误并责备你，你可以在提交后添加撤消。
最好的答案是最简单的答案stackoverflow.com/a/25893747/1536309

标签： javascript html

【解决方案1】：

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

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

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

【讨论】：

这适用于 Safari，因为 jQuery 解决方案似乎不起作用。奇怪吗？
@henrywright：是的。在 jQuery 中，Submit() 调用会触发 jQuery submit 事件，但不会触发底层表单 submit()。你当然可以使用$('form')[0].submit() 用 jQuery 来命中 DOM 元素

【解决方案2】：

只需告诉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，您会立即看到它的行为。

【讨论】：

【解决方案3】：

使用 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/…
这种方法在 Safari 中有效吗？我不知道。我已经测试了 Chrome、IE 和 FF，它们都可以工作。
@ErdalG：下面添加了工作 jQuery 版本。它避免了这个问题。

【解决方案4】：

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

【讨论】：

如果您投反对票，请添加评论，以明确哪些问题或应该改进的地方。

【解决方案5】：

最短的解是

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

【讨论】：

onchange="this.form.submit()"怎么样
onchange="form.submit()" 怎么样？ :)

【解决方案6】：

<form id="thisForm" enctype='multipart/form-data'>    
  <input type="file" name="file" id="file">
</form>

<script>
$(document).on('ready', function(){
  $('#file').on('change', function(){
    $('#thisForm').submit();
  });
});
</script>

【讨论】：

【解决方案7】：

这是我的图片上传解决方案，当用户选择文件时。

HTML 部分：

<form enctype="multipart/form-data" id="img_form" method="post">
    <input id="img_input" type="file" name="image" accept="image/*">
</form>

JavaScript：

document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
    var upload = document.getElementById('img_input');
    var image = upload.files[0];
    $.ajax({
      url:"/foo/bar/uploadPic",
      type: "POST",
      data: new FormData($('#img_form')[0]),
      contentType:false,
      cache: false,
      processData:false,
      success:function (msg) {}
      });
};

【讨论】：

【解决方案8】：

如果你已经在使用简单的 jQuery：

<input type="file" onChange="$(this).closest('form').submit()"/>

【讨论】：

【解决方案9】：

用 jquery 试试下面的代码：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<script>
$(document).ready(function(){
    $('#myForm').on('change', "input#MyFile", function (e) {
        e.preventDefault();
        $("#myForm").submit();
    });
});
</script>
<body>
    <div id="content">
        <form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
            <input type="file" id="MyFile" value="Upload" />
        </form>
    </div>
</body>
</html>

【讨论】：

+1 因为这是我发现的唯一一种方法，它使我能够使用 jquery 捕获提交事件。其他方法似乎绕过了提交事件，因此我无法在使用它们时对表单进行检查或使用 Ajax 提交。谢谢

【解决方案10】：

对于那些使用 .NET WebForms 的人来说，可能不需要完整的页面提交。相反，使用相同的 onchange 想法让 javascript 单击隐藏按钮（例如 display: none; 而不是Visible="false"。

【讨论】：

【解决方案11】：

HTML

<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>

纯JAVASCRIPT

<script type="text/javascript">
window.onload = function() {
    document.getElementById("xfilename").onchange = function() {
        document.getElementById("xtarget").submit();
    }
};
</script>

【讨论】：

【解决方案12】：

你可以把这段代码让你的代码只用一行代码就可以工作

<input type="file" onchange="javascript:this.form.submit()">

这将在不点击提交按钮的情况下将文件上传到服务器

【讨论】：

【解决方案13】：

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

 <script>
     // it will submit form 0 or you have to select particular form
     document.getElementsByTagName("form")[0].submit();       
 </script>

【讨论】：