How do I auto-submit an upload form when a file is selected?
Question
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.
14 answers
solution1
216 ACCPTED 2011-09-06 14:57:02
You can simply call your form's submit method in the onchange event of your file input.
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
solution2
85 2014-09-17 14:46:28
Just tell the file -input to automatically submit the form on any change:
<form action="http://example.com"> <input type="file" onchange="form.submit()" /> </form>
This solution works like this:
-
onchangemakes the input element execute the following script, whenever thevalueis modified -
formreferences the form, that this input element is part of submit()causes the form to send all data to the URL, as specified inaction
Advantages of this solution:
- Works without
ids. It makes life easier, if you have several forms in one html page. - Native javascript, no jQuery or similar required.
- The code is inside the html-tags. If you inspect the html, you will see it's behavior right away.
solution3
53 2011-09-06 14:55:55
Using 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>
solution4
35 2013-08-16 06:08:59
JavaScript with onchange event:
<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() :
$('#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>
solution5
10 2014-01-06 13:45:03
最短的解决方案是
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
solution6
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>
solution7
5 2017-03-21 08:13:07
如果您已经在使用 jQuery simple：
<input type="file" onChange="$(this).closest('form').submit()"/>
solution8
5 2017-09-30 18:31:03
This is my image upload solution, when user selected the file.
HTML part:
<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) {}
});
};
solution9
3 2016-10-19 14:13:13
Try bellow code with 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>
solution10
2 2013-10-04 14:43:42
For those who are using .NET WebForms a full page submit may not be desired. 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. Make sure you are doing a display: none; on the button and not Visible="false" .
solution11
2 2014-11-06 18:06:24
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>
solution12
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>
solution13
2 2016-10-21 10:30:53
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
solution14
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>
solution15
-1 2022-01-22 16:54:45
just a followup question to this. How do you prevent default submit event when doing an auto submit of form susing this onChange() ?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.