JQuery auto upload with input=file form

Question

I have this form

<form id="uploadFile" enctype="multipart/form-data">
    <h3>Upload a file:</h3>
    <input type="file" name="fileToUpload" id="fileToUpload" class="fileToUpload"/>
    <input type="submit" id="submit" value="Upload" name="submit"/>
</form>

And this jQuery code for the submit function (all in the same php file):

  $('#uploadFile').submit(function()
  {
    $old=$("#activity").html();

    event.preventDefault();
    $.ajax(
    { 
      url: "upload.php",
      type: 'POST',
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data)
      {
        $('.info').html(data);   
        $('.info').show();

        $("#content").load("this_same_file.php"); 
      }
    });
  });

It works fine. What I need to do is to 'automate' the 'submit' call. I mean, once I clicked OK on the pop-up file window, I would like to submit automatically the form.

I tried to follow the suggestions posted on the thread How do I auto-submit an upload form when a file is selected? but the only thing I can do is a window.alert advertising me that I have clicked the OK button of the pop-up window.

How can I implement this feature in my code ? Thank you in advance for your help.

Thank you all for your suggestions ! – Apr 14 '15 at 09:08 — , Apr 14 '15 at 09:08

score 2 · Accepted Answer · answered Apr 14 '15 at 08:18

2

You need to trigger the submit action after the change event on input:file happens,

$('#fileToUpload').change(function() {
    $('#submit').click();
    // or $('#uploadFile').submit();
});

answered Apr 14 '15 at 08:18

Shaunak D

20,588
10
46
79

score 0 · Answer 2 · answered Apr 14 '15 at 08:19

0

you need to make a trigger (doc)

answered Apr 14 '15 at 08:19

Haroldas

964
3
9
36

score 0 · Answer 3 · answered Apr 14 '15 at 08:19

0

$("#fileToUpload").change(function() {$("#uploadFile").submit();});

Beside I think you have to implement Jquery ajaxForm to send form with file input.

answered Apr 14 '15 at 08:19

Ali Sheikhpour

10,475
5
41
82

score 0 · Answer 4 · answered Apr 14 '15 at 08:24

0

try

$("#fileToUpload").live( 'change', function () {
 $('#uploadFile').submit();
});

answered Apr 14 '15 at 08:24

Saty

22,443
7
33
51

`.live()` is deprecated since JQuery 1.7, you should use `.on()` instead. – Ian Kemp Apr 14 '15 at 09:00
@IanKemp thanks you your important information from now i will always use .on() – Saty Apr 14 '15 at 09:17

score -1 · Answer 5 · edited Apr 18 '15 at 03:50

You can upload the image by calling a javascript function on change event or on click event.

<input type="file" onchange="uploadSharepic();" id='uploadBtn' value="Upload">

And in script

function uploadSharepic(){
    var val = $('#uploadBtn').val();
    $('#uploadshareFile').val(val);
    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif': case 'jpg': case 'png': case 'jpeg':
            $( "#uploadShare_image" ).submit();
            break;
        default:
            $('#uploadBtn').val("");
            $('#uploadshareFile').val("");
            $('.sharerror').removeClass('DisplayNone');
            $('.sharerror').addClass('DisplayBlock');
            $('.sharerror').html('Plese select image of type (gif, jpg, png).');
            break;
    }
}

JQuery auto upload with input=file form

5 Answers5