Fire javascript event onchange event of

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
        }
    });
}

similar thread ? http://stackoverflow.com/questions/2133807/alternate-to-onchange-event-in-input-type-file — Chandra Sekhar Walajapet, Sep 12 '12 at 08:30
yeah, but that does not change the situation, I create a new input and it still fires on second time and not first. — xaero, Sep 12 '12 at 08:33
Can you post your Javascript code? Maybe there are some errors in there? — Bas van den Heuvel, Sep 12 '12 at 08:42
Can you please try using jquery live method like $('#fileupload').live('change', function(){ uploadFile(); }); or like $("#fileupload").change(function() { alert('I clicked'); }); — mymotherland, Sep 12 '12 at 08: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, Sep 12 '12 at 09:02
I doubt, cause when I see the get request for showmultipledatadiv it is empty, plus I didn't write fileupload.php this is from blueimp plugin — xaero, Sep 12 '12 at 09:04

score 1 · Answer 1 · answered Apr 14 '17 at 02:18

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

Fire javascript event onchange event of

1 Answers1