Jquery, ajax beforeSend not working

Question

These are the photo uploading code:

$.ajax({
    url: "php/uploadPhoto.php",
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    beforeSend: function(XMLHttpRequest){
        XMLHttpRequest.upload.addEventListener("progress", function(evt){
            if(evt.lengthComputable){
                var percentComplete = evt.loaded / evt.total;
                alert(percentComplete);
            }
        }, false);
    },
    success: function (res) {

    }
});

It works if I do not add the "beforeSend" part....

If you are aiming at listening to upload progress when submitting a form with ajax, please have a look at this very useful jquery plugin: http://www.malsup.com/jquery/form/#options-object — atondelier, Apr 06 '13 at 15:52

score 1 · Answer 1 · answered Jan 29 '14 at 16:02

1

Try this:

$.ajax({
    url: "",
    data: formdata,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload) {
            if (myXhr.upload.addEventListener) {
                myXhr.upload.addEventListener('progress', `YOUR CALLBACK`, false);
            } else if(myXhr.upload.attachEvent) {
                myXhr.upload.attachEvent('progress', `YOUR CALLBACK`);
            }
        }
        return myXhr;
    },
    success: function (data) { },
    error: function (jqXHR, textStatus, errorThrown) { }
});

answered Jan 29 '14 at 16:02

Jason Foglia

2,414
3
27
48

The callback is only getting called once for me. I am working locally, which could be the cause, but shouldn't it be getting called many times to update us on its progress? – jordancooperman Aug 13 '15 at 15:38
1

Never mind, works in a production environment, thanks! – jordancooperman Aug 13 '15 at 15:47

Jquery, ajax beforeSend not working

1 Answers1