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.
This question is related to
javascript
html
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();
};
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) {}
});
};
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>
If you already using jQuery simple:
<input type="file" onChange="$(this).closest('form').submit()"/>
Using jQuery:
$('#file').change(function() {_x000D_
$('#target').submit();_x000D_
});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<form id="target" action="destination.html">_x000D_
<input type="file" id="file" value="Go" />_x000D_
</form>
_x000D_
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>
<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>
JavaScript with onchange
event:
<form action="upload.php" method="post" enctype="multipart/form-data">_x000D_
<input type="file" name="filename" onchange="javascript:this.form.submit();">_x000D_
</form>
_x000D_
jQuery
.change()
and .submit()
:
$('#fileInput').change(function() {_x000D_
$('#myForm').submit();_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>_x000D_
<form action="upload.php" id="myForm">_x000D_
<input type="file" id="fileInput">_x000D_
</form>
_x000D_
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
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"
.
Just tell the file
-input to automatically submit the form on any change:
<form action="http://example.com">_x000D_
<input type="file" onchange="form.submit()" />_x000D_
</form>
_x000D_
This solution works like this:
onchange
makes the input element execute the following script, whenever the value
is modifiedform
references the form, that this input element is part ofsubmit()
causes the form to send all data to the URL, as specified in action
Advantages of this solution:
id
s. It makes life easier, if you have several forms in one html page.The shortest solution is
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
<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>
Source: Stackoverflow.com