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

Question

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

Answer 1

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

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

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

Answer 2

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

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

此解决方案的优点:

• 没有ids的工作.如果你在一个html页面中有多个表单,它会让生活更轻松.
• 原生 javascript,没有jQuery或类似的要求.
• 代码在 html-tags内.如果您检查html,您将立即看到它的行为.

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

• onchange每当value修改时,使输入元素执行以下脚本
• form 引用该输入元素所属的表单
• submit() 导致表单将所有数据发送到URL,如中所述 action

Answer 3

使用jQuery:

$('#file').change(function() {
  $('#target').submit();
});

Answer 4

jquery onchange并.change()会帮助你.

或者在带有.submit()事件的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 simple：

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