Question

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

Answer 1

您只需在文件输入的submit事件中调用表单的onchange方法即可。

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

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

Answer 2

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

Answer 3

告诉file - 输入，以便在任何更改时自动提交表单：

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

此解决方案的优点：

没有id的作品。如果你在一个html页面中有多种形式，它会让生活更轻松。
原生 javascript，不需要jQuery或类似功能。
代码里面 html-tags。如果您检查html，您将立即看到它的行为。

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

value

onchange就会使输入元素执行以下脚本
form引用表单，此输入元素是
submit()会导致表单将所有数据发送到网址，如action

Answer 4

jquery .change()和.submit()会对您有所帮助。

或带有onchange事件的javascript：

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

Answer 5

最短的解决方案是

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

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

Answer 7

如果您已经使用简单的jQuery：

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

Answer 8

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

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

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

Answer 10

对于使用.NET WebForms的用户，可能不需要提交完整页面。相反，使用相同的onchange想法让javascript单击隐藏按钮（例如＆lt; asp：Button ...），隐藏按钮可以取其余部分。确保您在按钮上执行display: none;而不是Visible="false"。

Answer 11

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

Answer 12

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

Answer 13

您可以使用此代码使代码仅使用单行代码

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

这将在服务器上传文件而不点击提交按钮

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

13 个答案: