Fire javascript event onchange event of <input type="file"/>

Question

I have this code

<input id="fileupload" 
       type="file" name="files[]" 
       class="inputFile clickable" 
       onchange="uploadFile(this.value)"/>

This works fine on second time using it, i.e. first time I select the file the onchange event does not fire, but selecting file for the second time works fine.

Is there any thing which I can change here?

I have tried:

onlclick (doesn't work, fires before selecting file)
onblur (doesn't work, doesn't fire at all, plus even if does, its just stupid to click somewhere else on page to fire the operation)
onselect (doesn't work)

Additional info: If I use onchange=alert(this.value) it works fine

this is my javascript code

function uploadFile(value) {
     alert(value); //works fine
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'fileUpload.php',
        type: 'POST',
        limitConcurrentUploads: 1,
//        done: function (e, data) {
//            $.each(data.result, function (index, file) {
//                $('<p/>').text(file.name).appendTo(document.body);
//            });
//        },
        success: function() {
            showMultipleDataDiv(value); //but I don't get value here
        }
    });
}

yeah, but that does not change the situation, I create a new input and it still fires on second time and not first. — xaero
– xaero, Commented Sep 12, 2012 at 8:33
Can you post your Javascript code? Maybe there are some errors in there? — Bas van den Heuvel
– Bas van den Heuvel, Commented Sep 12, 2012 at 8:42
Can you please try using jquery live method like $('#fileupload').live('change', function(){ uploadFile(); }); or like $("#fileupload").change(function() { alert('I clicked'); }); — mymotherland
– mymotherland, Commented Sep 12, 2012 at 8:46
If you have access to error logs look at them and else try using the Chrome Network console (right-click page -> Inspect Element -> Network tab) and then submitting the upload form. I think there is something wrong with your fileUpload.php. — Bas van den Heuvel
– Bas van den Heuvel, Commented Sep 12, 2012 at 9:02

Rodrigo5244 · Accepted Answer · 2017-04-14 02:18:51Z

The code $('#fileupload').fileupload will trigger a file upload as soon as the user selects a file. You need to run this code before the user selects a file, because it adds an event listener to the input tag. Since you only run this code after the user selects a file, then it will only work on the second time.

This is the change you need to do to make it work

$(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    url: 'fileUpload.php',
    type: 'POST',
    limitConcurrentUploads: 1,
    //        done: function (e, data) {
    //            $.each(data.result, function (index, file) {
    //                $('<p/>').text(file.name).appendTo(document.body);
    //            });
    //        },
    success: function () {
      showMultipleDataDiv(value); //but I don't get value here
    }
  });
});

Notice there is no need to add code in the change event. The plugin is going to do that for you.

You can read more about it here: https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Collectives™ on Stack Overflow

Fire javascript event onchange event of <input type="file"/>

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related