DWQA QuestionsCategory: ProgramPHP + jQuery for loop sending Ajax request, monitoring file upload progress is not correct
sunshine asked 2 months ago

In order to achieve a click button to achieve multi file upload and generate a separate progress bar for each file

<form id="form" method="post">
    <input type="file" class="btn btn-primary" name="file" id="file" multiple>
</form>
<button id="button">upload</button>

Click event

$('#button').on('click',function () {
            $("#file").trigger("click");    // Trigger input click event
            $('# file'). On ('change ', function() {// monitor input change
                var length = $('#file')[0].files.length;    // Gets the number of selected files
                for(var index=0 ; index<length; Index + +) {// loop sending Ajax
                    var file = document.getElementById('file').files[index];    // According to the loop variable to dynamically select the user's multiple selected files
                    var name = file.name;    // file name
                    var size = file.size;    // file size
                    var formData = new FormData();
                    /*
                        A table row is generated dynamically, with a progress bar showing bootstrap
                    */
                    
                    formData.append('file',file);    // Data sent
                    $.ajax({
                        type: 'post',
                        url: "{:url('index/home/uploader')}",
                        data: formData,
                        cache: false,
                        processData: false,
                        contentType: false,
                        XHR: function() {// get upload progress
                            myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) {
                                myXhr.upload.addEventListener('progress', function (e) {
                                    console.log(e);
                                    var loaded = e.loaded;// Uploaded
                                    console.log(loaded);
                                    var total = e.total;// Total size
                                    console.log(total);
                                    var percent = Math.floor(100 * loaded / total);// speed of progress
                                    console.log(percent);
                                    console.log(index);
                                    //According to the above dynamically generated progress bar ID and progress data, modify the style to display the progress
                                    setProgress('upload_'+index,percent);
                                });
                                return myXhr;
                            }
                        },

After searching, the for loop doesn’t wait for Ajax to finish executing. When the next loop is executed, as long as the request is sent, the for loop will continue to execute, and the for loop is faster than Ajax, so

setProgress('upload_'+index,percent);

The index loop variable obtained in always gets the last one, resulting in incorrect display of progress bar.
Is there any way to solve it?
Specifically, I want each Ajax to get a different ID value
Or is there any other way to upload multiple files and display a progress bar for each file
Ask for support

1 Answers
moonsola answered 2 months ago

The Ajax part is encapsulated as a function

function fileUpload(i){
    //…………
}

Call this function in the for loop

for(var index=0 ;index<length;index++){
    //…………
    fileUpload(index);
}
sunshine replied 2 months ago

This is OK, thank you