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

154

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

javascript html

— 内存1
source

9

如果用户选择了错误的文件怎么办？IMO，您应将其留给用户选择何时提交。

— Tyler Crompton

2

@Tyler大多数人会选择正确的文件，而我正在尝试减少UX摩擦。对于选择错误文件的人，文件上传后，他们可以选择删除它。

— ram1

3

“大多数人”做出明智的决定，但大多数人却没有。

— 菲克斯

2

我同意@TylerCrompton，用户将犯下最愚蠢的错误，并怪罪于您，您可以在提交后添加撤消。

— Ross Keddy

3

最好的答案是最简单的答案stackoverflow.com/a/25893747/1536309

— Blair Anderson

194

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

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

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

— 亚历克斯·特平
source

4

这可以在Safari中使用，因为jQuery解决方案似乎不起作用。奇怪？

— henrywright 2014年

2

@henrywright：是的。在jQuery中，该Submit()调用会触发jQuery submit事件，但不会触发基础表单submit()。当然，您可以使用$('form')[0].submit()jQuery打DOM元素

— Gone Coding

68

只需告诉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标签内。如果您检查html，则会立即看到它的行为。

— 斯拉蒂丹
source

48

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

展开摘要

— 萨米奇
source

此外，同样的问题是在计算器：stackoverflow.com/questions/4704154/...

— Samich

这种方法在Safari中有效吗？我不确定。我已经测试了Chrome，IE和FF都可以使用。

— henrywright 2014年

@ErdalG：下面添加了可工作的jQuery版本。它避免了这个问题。

— Gone Coding

31

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

展开摘要

— 亚历克斯·K
source

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

— Alex.K.

9

最短的解决方案是

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

— xboz
source

2

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

— vikkee '16

1

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

— slartidan'1

5

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

— 杜尔巴·巴拉（Dhurba Baral）
source

4

如果您已经使用jQuery简单：

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

— 索丁
source

4

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

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) {}
      });
};

— 西吉
source

2

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

— 拉齐布·马门（Razib Al Mamun）
source

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

— user1404617

1

对于那些使用.NET WebForms的人，可能不希望提交完整页面。取而代之的是，使用相同的onchange想法让javascript单击隐藏的按钮（例如<asp：Button ...），然后隐藏的按钮可以处理其余的按钮。确保您正在display: none;按按钮而不是Visible="false"。

— 佩罗亚
source

1

的HTML

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

JAVASCRIPT PURE

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

— 劲霸
source

1

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

— 安南·达比（Anant Dabhi）
source

0

您可以放置此代码以使您的代码仅使用一行代码即可工作

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

这将文件上传到服务器上，而无需单击提交按钮

— 阿米特·库玛（Amit Kumar）
source