选择文件时如何自动提交上传表单？
[英]How do I auto-submit an upload form when a file is selected?
问题描述
我有一个简单的文件上传表单。 选择文件后如何使其自动提交？ 我不希望用户必须单击提交按钮。
14 个解决方案
解决方案1
216 已采纳 2011-09-06 14:57:02
您可以在文件输入的onchange事件中简单地调用表单的submit方法。
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
解决方案2
85 2014-09-17 14:46:28
只需告诉file -input 在任何更改时自动提交表单：
<form action="http://example.com"> <input type="file" onchange="form.submit()" /> </form>
此解决方案的工作方式如下：
该解决方案的优点：
- 无需
id。 如果您在一个 html 页面中有多个表单，它会使生活更轻松。 - 原生javascript，不需要 jQuery 或类似工具。
- 代码在html-tags 中。 如果您检查 html，您将立即看到它的行为。
解决方案3
53 2011-09-06 14:55:55
使用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>
解决方案4
35 2013-08-16 06:08:59
带有onchange事件的 JavaScript：
<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filename" onchange="javascript:this.form.submit();"> </form>
$('#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
10 2014-01-06 13:45:03
最短的解决方案是
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
解决方案6
7 2016-10-21 02:30:23
<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
5 2017-03-21 08:13:07
如果您已经在使用 jQuery simple：
<input type="file" onChange="$(this).closest('form').submit()"/>
解决方案8
5 2017-09-30 18:31:03
这是我的图像上传解决方案，当用户选择文件时。
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) {}
});
};
解决方案9
3 2016-10-19 14:13:13
使用 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>
解决方案10
2 2013-10-04 14:43:42
对于那些使用 .NET WebForms 的人来说，可能不需要完整的页面提交。 相反，使用相同的onchange想法让 javascript 单击隐藏按钮（例如 <asp:Button...），隐藏按钮可以处理其余部分。 确保你正在做一个display: none; 在按钮上而不是Visible="false" 。
解决方案11
2 2014-11-06 18:06:24
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
2 2016-10-21 10:02:01
<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>
解决方案13
2 2016-10-21 10:30:53
您可以放置此代码以使您的代码仅使用一行代码
<input type="file" onchange="javascript:this.form.submit()">
这将在服务器上上传文件而无需单击提交按钮
解决方案14
0 2022-07-20 09:31:23
$('#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>
解决方案15
-1 2022-01-22 16:54:45
只是对此的后续问题。 使用此 onChange() 自动提交表单时，如何防止默认提交事件？
选择文件后自动提交上传表单，并触发操作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.