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.
-
9What if the user selects the wrong file? IMO, you should leave it to the user to choose when to submit.– Tyler CromptonSep 6, 2011 at 14:58
-
3@Tyler Most people will select the correct file and I am trying to reduce UX friction. For those people who select the wrong file, after it has been uploaded they may choose to delete it.– ram1Sep 6, 2011 at 18:02
-
4"most people" make smart decisions, but most people aren't.– PhixAug 16, 2013 at 6:31
-
2I agree with @TylerCrompton, users will make the dumbest mistakes and blame you for it, you could add an undo after the submission.– Ross KeddyOct 19, 2016 at 19:06
-
3the best answer is the simplest answer stackoverflow.com/a/25893747/1536309– Blair AndersonJan 24, 2019 at 20:17
14 Answers
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();
};
-
4This works in Safari where as the jQuery solution doesn't seem to work. Strange? Feb 14, 2014 at 12:08
-
2@henrywright: Yes. In jQuery the
Submit()
call triggers the jQuerysubmit
event, but does not fire the underlying formsubmit()
. You can of course use$('form')[0].submit()
to hit the DOM element with jQuery Sep 20, 2016 at 11:48
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:
onchange
makes the input element execute the following script, whenever thevalue
is modifiedform
references 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
id
s. 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.
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>
-
also, the same question was on stackoverflow: stackoverflow.com/questions/4704154/…– SamichSep 6, 2011 at 14:57
-
Does this approach work in Safari? I'm not sure. I've tested Chrome, IE and FF which all work. Feb 14, 2014 at 11:55
-
@ErdalG: Working jQuery version added below. It avoids this problem. Sep 20, 2016 at 11:51
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>
-
add a comment if you do down vote to make clear what's wrong or what should be improved. Oct 14, 2016 at 21:17
The shortest solution is
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
-
3
-
3
<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>
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) {}
});
};
If you already using jQuery simple:
<input type="file" onChange="$(this).closest('form').submit()"/>
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>
-
+1 because this is the only method I found that enabled me to catch the submit event with jquery. The other methods seem to bypass the submit event so I can not do checks on the form or submit with Ajax when using them. Thanks Mar 14, 2017 at 16:56
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"
.
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>
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
<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>
$('#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>