Getting e.loaded for each new image upload in progress

[Me11]

I want use html5 for multiple image upload and show progress bar only the last image after handle files, i tried as the following code and progress bar to get e.loaded & e.total If you have uploaded several images of before and upload(add) new image It added the size(bytes) of all photos together, while I want only getting e.loaded & e.total new image upload(add) no for all images.

for example:

There are tow images than before and i want upload thrid image.

name || size(bytes)

img11 || 300 b

img22 || 100 b

Now i want upload thrid image

img33 || 50 b

e.total rather than just show the size of the uploaded new image(thrid image img33) it shows the Total siz of all image(img11+img22+img33).

The result is the code below: img size: 450

I expect the following code: img size: 50

how is it in my code?

function handleFiles(files) {
    var formData = new FormData($('.EditUserInfo')[0]);
    $.ajax({
        url: 'insert_image',
        type: 'POST',
        dataType: 'json',
        maxNumberOfFiles: 1,
        autoUpload: false,
        xhr: function() {
            myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            }
            return myXhr;
        },
        success: function(result) {
            console.log($.ajaxSettings.xhr().upload);

            alert('upload is done');

        },
        "error": function(x, y, z) {
            alert("An error has occured:\n" + JSON.stringify(x) + "\n" + JSON.stringify(y) + "\n" + JSON.stringify(z));
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });

    function progressHandlingFunction(e) { // ***** I mean here. **** //
        if (e.lengthComputable) {
            
             alert('img size: '+e.loaded);

            //var percentComplete = Math.round(e.loaded * 100 / e.total);
            //$('.progress').text(percentComplete.toString() + '%');
            
        }
    }
}

[Me11]

Please help me, it is very important to me.

[markbrown4]

Hi,

I found this answer which may work for you, I believe it’s a case where you may need to make separate requests for each upload if you want to track the progress of each file separately.