How do I auto-submit an upload form when a file is selected?
JavascriptHtmlJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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();
};
Solution 2 - Javascript
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 modifiedformreferences the form, that this input element is part ofsubmit()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.
Solution 3 - Javascript
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>
Solution 4 - Javascript
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>
Solution 5 - Javascript
The shortest solution is
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
Solution 6 - Javascript
<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>
Solution 7 - Javascript
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) {}
});
};
Solution 8 - Javascript
If you already using jQuery simple:
<input type="file" onChange="$(this).closest('form').submit()"/>
Solution 9 - Javascript
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>
Solution 10 - Javascript
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 (e.g. <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".
Solution 11 - Javascript
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>
Solution 12 - Javascript
<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>
Solution 13 - Javascript
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