[英]How do I auto-submit an upload form when a file is selected?
I have a simple file upload form.我有一个简单的文件上传表单。 How do I make it submit automatically when a file has been selected?
选择文件后如何使其自动提交? I don't want the user to have to click the Submit button.
我不希望用户必须单击提交按钮。
You can simply call your form's submit
method in the onchange
event of your file input.您可以在文件输入的
onchange
事件中简单地调用表单的submit
方法。
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
Just tell the file
-input to automatically submit the form on any change:只需告诉
file
-input 在任何更改时自动提交表单:
<form action="http://example.com"> <input type="file" onchange="form.submit()" /> </form>
This solution works like this:此解决方案的工作方式如下:
onchange
makes the input element execute the following script, whenever the value
is modified onchange
使输入元素执行以下脚本,无论何时修改value
form
references the form, that this input element is part of form
引用表单,该输入元素是其中的一部分submit()
causes the form to send all data to the URL, as specified in action
submit()
使表单将所有数据发送到 URL,如action
指定的那样Advantages of this solution:该解决方案的优点:
id
s.id
。 It makes life easier, if you have several forms in one html page.Using jQuery:使用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>
JavaScript with onchange
event:带有
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()
and .submit()
: 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>
最短的解决方案是
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
<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>
如果您已经在使用 jQuery simple:
<input type="file" onChange="$(this).closest('form').submit()"/>
This is my image upload solution, when user selected the file.这是我的图像上传解决方案,当用户选择文件时。
HTML part: HTML部分:
<form enctype="multipart/form-data" id="img_form" method="post">
<input id="img_input" type="file" name="image" accept="image/*">
</form>
JavaScript: 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) {}
});
};
Try bellow code with jquery :使用 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>
For those who are using .NET WebForms a full page submit may not be desired.对于那些使用 .NET WebForms 的人来说,可能不需要完整的页面提交。 Instead, use the same
onchange
idea to have javascript click a hidden button (eg <asp:Button...) and the hidden button can take of the rest.相反,使用相同的
onchange
想法让 javascript 单击隐藏按钮(例如 <asp:Button...),隐藏按钮可以处理其余部分。 Make sure you are doing a display: none;
确保你正在做一个
display: none;
on the button and not Visible="false"
.在按钮上而不是
Visible="false"
。
HTML HTML
<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>
JAVASCRIPT PURE纯JAVASCRIPT
<script type="text/javascript">
window.onload = function() {
document.getElementById("xfilename").onchange = function() {
document.getElementById("xtarget").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>
You can put this code to make your code work with just single line of code您可以放置此代码以使您的代码仅使用一行代码
<input type="file" onchange="javascript:this.form.submit()">
This will upload the file on server without clicking on submit button这将在服务器上上传文件而无需单击提交按钮
$('#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>
just a followup question to this.只是对此的后续问题。 How do you prevent default submit event when doing an auto submit of form susing this onChange() ?
使用此 onChange() 自动提交表单时,如何防止默认提交事件?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.