POST immediately after select a file

Question

I have the following HTML code

<form action="/script/upload_key.py" method="POST" enctype="multipart/form-data"> 
    Key filename: <input name="file_1" type="file"> 
    <input name="submit" type="submit"> 
</form>

which gives me the following stuff.

alt text

I was wondering

How I can use JavaScript, to eliminate the need of Submit button. That's mean, once I Choose File, the selected file will be uploaded immediately?
How can I make sure the field to display selected file name is long enough, so that ... will not be shown?

Why would you want to bypass the Submit button? And, if you manage #1, #2 won't matter because the user will be redirected right after they choose the file. — Evan Mulawski, Jan 19 '11 at 00:51
So, as soon as I accidentally pick the wrong file it'll get uploaded without me having to confirm that I want the wrong file uploaded by pressing the submit button. — Stephen P, Jan 19 '11 at 01:01

lepe · Accepted Answer · 2016-07-09T01:04:55.890

48

To submit it immediately, just do this:

<input name="file_1" type="file" onchange="this.form.submit();">

If you are using JQuery:

$("input[name='file_1']").change(function() { this.form.submit(); });

About your other questions:

1) There are many methods out there... for example:

http://valums.com/ajax-upload/

http://www.webtoolkit.info/ajax-file-upload.html

(and many more. Just google for: "Ajax file upload" or "iframe file upload")

2) Don't worry about the width of the field. As you don't know how long can it be the path, it would never be long enough (i think). Also browsers may display it very different. For example Safari or Chrome show it very different from Firefox or IE. Just use the default length or the one that looks better with your design.

edited Jul 09 '16 at 01:04

answered Jan 19 '11 at 00:55

lepe

24,677
9
99
108

2

You don't need the "javascript:" prefix inside onevent attributes – Šime Vidas Jan 19 '11 at 01:21
Fails on ie8 with access denied on the call to submit. – Maurice Flanagan Sep 12 '12 at 23:02

score 4 · Answer 2 · answered Jul 04 '18 at 12:42

In case you don't want or need to submit the whole form on file input select, then you can do this to send only the file:

$(document).ready(function (e) {
 $("#uploadImage").on('change',(function(e) {
  // append file input to form data
  var fileInput = document.getElementById('uploadImage');
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append('uploadImage', file);

  $.ajax({
   url: "ajaxupload.php",
   type: "POST",
   data: formData,
   contentType: false,
   cache: false,
   processData:false,
   success: function(data) {
    if(data=='invalid') {
     // invalid file format.
     $("#err").html("Invalid File !").fadeIn();
    }

    else {
     // view uploaded file.
     $("#preview").html(data).fadeIn();
     $("#form")[0].reset();
    }
   },
   error: function(e) {
    $("#err").html(e).fadeIn();
   }
  });
 }));
});

<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
  <input id="uploadImage" type="file" accept="image/*" name="uploadImage">
  <input class="btn btn-success" type="submit" value="Upload">
  
  <div id="err"></div>
</form>

So first you get the input file element with getElementById(), then you append to FormData, then send the FormData as data in your ajax call. Do the server side upload processing in ajaxupload.php.

score 2 · Answer 3 · answered Jan 19 '11 at 00:50

2

For the first one:

<input name="file_1" type="file" onchange="this.form.submit()">

I'm not sure about making the field wide enough though. Sometimes CSS is crippled on file upload fields to prevent exploits.

answered Jan 19 '11 at 00:50

scragz

6,670
2
23
23

Generally to style file inputs you have to employ the trick of putting a phantom transparent file input element over some dummy elements that look the way you want them to. – Pointy Jan 19 '11 at 00:52
I did it like that once a LONG time ago and have since decided it is usually best to keep form inputs as people would expect the way they are natively rendered. Here's the guide if you really want to do it this way: http://www.quirksmode.org/dom/inputfile.html – scragz Jan 19 '11 at 01:25

dpmguise · Answer 4 · 2011-01-19T00:58:27.263

Rough guess at what you want - when the text field changes it will trigger the form submission

$('.target').change(function() {
  document.forms["myform"].submit();
});

Edit: Sorry, I've used jQuery...

If you submit the form onchange, you won't notice the field get populated and therefore should not need to change the text length. If you desire to, I would get the character count of the string in the field and then apply a size attribute to the input

mylength = document.getElementById('myfield').value
document.getElementById('myfield').size = mylength;

POST immediately after select a file

4 Answers4

Linked

Related