I've seen a few posts on here with similar issues, but I can't seem to get this solved. Basically, I have an AJAX file uploader that doesn't seem to call the progress event. The other events fire just fine, and the file uploads exactly as I expect it, but the progress event isn't being called. The Javascript is shown below:

$('input[name=avatar_upload]').change(function(e) {
    // Get the Form
    var setupForm = $('#setup-member-form');

    // Get the File Array
    var file = document.getElementById('avatar-upload').files[0];

    // Show the File Upload Progress
    $('#avatar-upload-progress').show();

    // Create a new Form Data Object
    var formData = new FormData();

    // Add the File
    formData.append('avatar', file);

    // Create the AJAX Object
    var ajax = new XMLHttpRequest();

    // Add the Event Listeners
    ajax.addEventListener("loadstart", function(evt) {
         // Do something in here...
         $('#output').append("upload starting...\n");
    }, false);
    ajax.addEventListener("progress", function(evt) {
         var percentLoaded = (evt.loaded / evt.total) * 100;
         $('#output').append(percentLoaded + "% loaded\n");
         $('#avatar-upload-progress .ui-progress-bar-inner').animate({'width' : percentLoaded + '%'}, 400);
    }, false);
    ajax.addEventListener("load", function(evt) {
         // Do something in here when loaded...
         $('#output').append("upload plete!");
    }, false);

    // Open the Form
    ajax.open("POST", $('input[name=upload_handler]').val());
    ajax.send(formData);
});

At first I thought it might just be because the file was too small for the progress event to have a chance to fire, but I've tried it with larger files, and the load event fires, then there is a few seconds pause, then the plete event fires.

If anyone has any ideas, please let me know!

I've seen a few posts on here with similar issues, but I can't seem to get this solved. Basically, I have an AJAX file uploader that doesn't seem to call the progress event. The other events fire just fine, and the file uploads exactly as I expect it, but the progress event isn't being called. The Javascript is shown below:

$('input[name=avatar_upload]').change(function(e) {
    // Get the Form
    var setupForm = $('#setup-member-form');

    // Get the File Array
    var file = document.getElementById('avatar-upload').files[0];

    // Show the File Upload Progress
    $('#avatar-upload-progress').show();

    // Create a new Form Data Object
    var formData = new FormData();

    // Add the File
    formData.append('avatar', file);

    // Create the AJAX Object
    var ajax = new XMLHttpRequest();

    // Add the Event Listeners
    ajax.addEventListener("loadstart", function(evt) {
         // Do something in here...
         $('#output').append("upload starting...\n");
    }, false);
    ajax.addEventListener("progress", function(evt) {
         var percentLoaded = (evt.loaded / evt.total) * 100;
         $('#output').append(percentLoaded + "% loaded\n");
         $('#avatar-upload-progress .ui-progress-bar-inner').animate({'width' : percentLoaded + '%'}, 400);
    }, false);
    ajax.addEventListener("load", function(evt) {
         // Do something in here when loaded...
         $('#output').append("upload plete!");
    }, false);

    // Open the Form
    ajax.open("POST", $('input[name=upload_handler]').val());
    ajax.send(formData);
});

At first I thought it might just be because the file was too small for the progress event to have a chance to fire, but I've tried it with larger files, and the load event fires, then there is a few seconds pause, then the plete event fires.

If anyone has any ideas, please let me know!

• javascript
• jquery
• ajax
• xmlhttprequest
• jquery-events

Share Improve this question Follow edited Nov 10, 2020 at 12:57 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 31, 2014 at 0:41 Andy MillsAndy Mills 13522 silver badges1313 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Just tested this, and for uploads you have to use XMLHttpRequest.upload, as attaching the events directly to XMLHttpRequest only fires once when uploading.

It's also explained in the documentation on MDN

$('#avatar-upload').on('change', function () {
    var file = document.getElementById('avatar-upload').files[0];

    $('#avatar-upload-progress').show();
    var formData = new FormData();
    formData.append('avatar', file);

    var ajax = new XMLHttpRequest();

    ajax.upload.addEventListener("loadstart", function (evt) {
        $('#output').append("upload starting...\n");
    }, false);

    ajax.upload.addEventListener("progress", function (evt) {
        var percentLoaded = (evt.loaded / evt.total) * 100;
        $('#output').append(percentLoaded + "% loaded\n");
        $('#avatar-upload-progress .ui-progress-bar-inner').animate({
            'width': percentLoaded + '%'
        }, 400);
    }, false);

    ajax.upload.addEventListener("load", function (evt) {
        $('#output').append("upload plete!");
    }, false);

    ajax.open("POST", $('input[name=upload_handler]').val());
    ajax.send(formData);
});

In my case the problem was the way I was creating the XMLHttpRequest object. Turns out I was missing the "window" object. I had this:

requestObject = new XMLHttpRequest();
requestObject.upload.addEventListener('progress', videoUploadProgress, false);

And changed it to this:

requestObject = new window.XMLHttpRequest();
requestObject.upload.addEventListener('progress', videoUploadProgress, false);

Now it works.