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 开发者_StackOverflowbutton.
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();
};
http://jsfiddle.net/cwvc4/73/
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.
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>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>The shortest solution is
<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>
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>
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>
加载中,请稍侯......
精彩评论