如何自动提交上载表单时，文件被选中？

我有一个简单的文件上传表单。如何使它自动提交时，文件已被选中？我不希望用户必须单击 Submit 按钮。

200980 次浏览
小开

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

小开
最佳答案

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

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

Http://jsfiddle.net/cwvc4/73/

小开

JavaScript 与 onchange事件: 

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

小开

对于那些正在使用。NETWebForms 一个完整的页面提交可能不是理想的。相反，使用相同的 onchange思想，让 javascript 单击一个隐藏按钮(例如 < asp: Button...) ，隐藏按钮可以接管其余部分。确保你是在按钮上做 display: none;而不是 Visible="false"。

小开

最短的解决办法是

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

只要告诉 file-输入在任何更改时自动提交表单:

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

这个解决方案是这样的:

这种解决方案的优点:

  • 没有 id的工作。它使生活更容易，如果你有 几种形式在一个 html 页面。
  • 原生的 javascript，不需要 jQuery 或类似的东西。
  • 代码是 html 标签的 在里面。如果你检查 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>
小开

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

您可以将此代码用于使您的代码只使用单行代码工作

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

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

小开

如果您已经在使用 jQuery simple:

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

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

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

$('#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>


提交答案