There is a way to automatically submit a form without clicking to a "submit" button?
I have a form with one "file" input. I would submit the form after the user have selected one file.
Add a comment
|
6 Answers
yes, you can use the form.submit() function. Add an onchange listener on the file input and link it to the form.submit() function, like so:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" onchange="this.form.submit()" name="myFile"/>
</form>
Comments
Yes, you can add the following to the onchange event of the file input:
<input type='file' .... onchange='this.form.submit();'>
this submits the form right after the user has picked a file. However, the user can't correct a mistaken selection before submitting - be sure to check whether this is really wise.
Comments
This solution works for me.
<form enctype="multipart/form-data" method="POST" action="/upload">
<input id="myfilefield" type="file" name="file">
<input type="submit">
</form>
document.getElementById('myfilefield').onchange = function() {
this.form.submit();
};
By the way, you don't need to use flash. Gmail do it by XHR Level 2.
Comments
I don't believe you can do this. Browsers are very, very strict about what you can do to file upload fields, because of the potential for abuse. If the user accidentally selects a private file, they wouldn't want it to immediately start uploading that file to a random server.
3 Comments
Marius
not true, I just tested the code in my answer, and it works (at least in Firefox).
dognose
Checked with IE, Edge, Chrome, Firefox - none will accept this, while
onchange='alert("test");' is fine. Believe, this does not work for enctype multipart/form-data - which is required to have a file-upload work.dognose
edit: stackoverflow.com/questions/833032/… That's the point. don't name the submit button
submit, else it fails with console error submit is not a function. name it different, then it works.I'm not sure what the restrictions are with doing this in an HTML form.
You can, however, do it with Flash. Gmail does it - when I click "Attach a file", I get prompted with a file browse dialog, and when I OK that dialog the upload begins immediately, and also gives me a progress bar.
Googling for "Flash uploader" will give you many options, but I don't have experience with any of them.
Comments
The solutions that were here to add an event listener in the input didn't work for me, so I found another solution, and I wanted to share it.
HTML:
<form id="attachUpload" method="POST" action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
<input id="uploadAttachment" type="file" name="files[]" placeholder="Computer" multiple />
</form>
The code to submit the form:
$(document).on('change', '#uploadAttachment', function() {
$('#attachUpload').trigger('submit');
});
And than if you want to post that data after the form is submitted:
$(document).on('submit', '#attachUpload', function(e) {
// code here
})
