如何在ajax调用中获取文件上传进度状态？

Question

我正在通过 ajax 上传多个文件，我需要在其中保留一个进度条。只有在所有过程完成后我才能获得进度完成状态，所以我需要在上传过程中保持进度条显示状态。

在这里，当我点击 'btnEditImageSave' 按钮时，我正在检查现有文件是否在 if 条件下被删除和上传。在 ajax 完整功能中存储上传文件并将其传递给上传过程。在其中我包含了进度条代码以显示进度状态，但它仅在所有过程完成后才显示。

$('#btnEditImageSave').unbind().click(function (event) {
        $('#progressBardiv').css('width', '0');
        $('.progressBardiv').text('');  
 if (uploadedfiles.length > 0 && deleteFiles.length == 0) {
                if (editStoredFiles.length > 0) {
                    var files = new FormData();
                    for (var i = 0; i < editStoredFiles.length; i++) {
                        if (editStoredFiles[i].size > 0) {
                            files.append(editStoredFiles[i].name, editStoredFiles[i]);
                        }
                    }
                    uploadedfiles = [];
                    files.append('SerialNumber', editSerialNumber);
                  $.ajax({
                        type: "POST",
                        url: productionBaseUrl + '/Home/UploadDockingStationFiles',
                        data: files,
                        contentType: false,
                        processData: false,
                      async: true,

                      complete: function () {
                          uploadedfiles = [];
                          $('#editfileupload').val();
                          $.ajax({
                                type: "POST",
                                url: cloudServerUrl + "/api/dockstation/updatefiledisplaytimer",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                data: JSON.stringify({
                                    SerialNumber: $('#ddlEditDockingStationSerialNumber').val(),
                                    FileSpinTimer: $('#txtEditTimer').val(),
                                    IsHDMIUpdate: isHDMIUpdate
                                }),
                               /*----My Progress Bar code----*/
                                xhr: function () {
                                    var xhr = new window.XMLHttpRequest();
                                    xhr.upload.addEventListener("progress", function (event) {
                                        if (event.lengthComputable) {
                                            var percentComplete = event.loaded / event.total;
                                            percentComplete = parseInt(percentComplete * 100);
                                            $('#progressBardiv').text(percentComplete + '%');
                                            $('#progressBardiv').css('width', percentComplete + '%');
                                        }
                                    }, false);
                                    return xhr;
                                },
                                complete: function () {
                                    $('#loading-popup').hide();
                                    $('#divEditDockingStationImages').dialog("close");
                                    $.popup('<pre>Message</pre>', "Image Configuration Updated Successfully.", 'OK');
                                    return false;
                                }
                            });
                        }
                    });
                }
            }
            else {
                $('#loading-popup').hide();
                $.popup('<pre>Message</pre>', "Please Select a File.", 'OK');
                return false;
            }
}


    <div class="progress">
     <div id="progressBardiv" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="">
     <span class="sr-only"></span>
     </div>
     </div>

Answer 1

您可以使用plUpload插件上传文件..

关注这个link：https://www.plupload.com/docs 它有自己的进度条事件...

查看下面的示例代码...

var uploader = new plupload.Uploader({
    runtimes: 'html5,flash,silverlight,html4',
    browse_button: 'pickfiles', // you can pass in id...
    container: document.getElementById('container'), // ... or DOM Element itself
    url: "//",
    filters: {
        max_file_size: '500mb',
        mime_types: [
        { title: "PDF files", extensions: "pdf" }
        ]
    },
    flash_swf_url: '/plupload/js/Moxie.swf',    // Flash settings
    silverlight_xap_url: '/plupload/js/Moxie.xap',    // Silverlight settings
    init: {
        PostInit: function () {
        // whereas filelist is the divid which contains uploaded file names....
            document.getElementById('filelist').innerHTML = '';

                uploader.start();

        },
        FilesAdded: function (up, files) {
            plupload.each(files, function (file) {
                document.getElementById('filelist').innerHTML +=
                    '<div id ="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) +
                    ') <b></b> <a href ="" class="remove text-danger pull-right">Remove</a></div>' +
                    '<div class="progressbar" id ="progressBar_' + file.id + '"> <div class="mybar" id="myBar' + file.id + '"></div></div>';
            });

        },
        UploadProgress: function (up, file) {
            var $progressId = $("#filelist div#progressBar_" + file.id + " div.mybar");
            $progressId.css('width', file.percent + '%');
            //To Remove 'Remove Link' while file is in uploading state.
            $("#filelist div#" + file.id).find('a.remove').remove();
            document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        },
        FileUploaded: function (up, file, ServerResponse) {
            var response = JSON.parse(ServerResponse.response);

        },
        UploadComplete: function (up, file) {
                 },
        Error: function (up, err) {
            document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
        }
    }
});
uploader.init();

我在我的项目中使用了下面的快照，

Answer 2

 if (deleteFiles.length > 0 && uploadedfiles.length > 0) {
            $.ajax({
                type: "POST",
                url: productionBaseUrl + "/Home/DeleteDockingStationFiles",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                data: JSON.stringify({
                    serialNumber: editSerialNumber,
                    files: deleteFiles
                }),

                complete: function () {
                    deleteFiles = [];
                    if (editStoredFiles.length > 0) {
                        var files = new FormData();
                        for (var i = 0; i < editStoredFiles.length; i++) {
                            if (editStoredFiles[i].size > 0) {
                                files.append(editStoredFiles[i].name, editStoredFiles[i]);
                            }
                        }
                        uploadedfiles = [];
                        files.append('SerialNumber', editSerialNumber);
                         $.ajax({
                            type: "POST",
                            url: productionBaseUrl + '/Home/UploadDockingStationFiles',
                            data: files,
                            contentType: false,
                            processData: false,
                             async: true,
                             xhr: function (data) {
                                 var xhr = new window.XMLHttpRequest(data);
                                 xhr.upload.addEventListener("progress", function (event) {
                                     if (event.lengthComputable) {
                                         var percentComplete = event.loaded / event.total;
                                         percentComplete = parseInt(percentComplete * 100);
                                         $('#progressBardiv').text(percentComplete + '%');
                                         $('#progressBardiv').css('width', percentComplete + '%');
                                     }
                                 }, false);
                                 return xhr;
                             },
                             beforeSend: function () {
                                uploadedfiles = [];
                                 $('#editfileupload').val();

                               $.ajax({
                                    type: "POST",
                                    url: cloudServerUrl + "/api/dockstation/updatefiledisplaytimer",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    data: JSON.stringify({
                                        SerialNumber: $('#ddlEditDockingStationSerialNumber').val(),
                                        FileSpinTimer: $('#txtEditTimer').val(),
                                        IsHDMIUpdate: isHDMIUpdate
                                    }),

                                   complete: function () {
                                        $('#loading-popup').hide();
                                        $('#divEditDockingStationImages').dialog("close");
                                        $.popup('<pre>Message</pre>', "Image Configuration Updated Successfully.", 'OK');
                                        return false;
                                    }
                                });
                            }
                        });
                    }
                }
            });


        }

如何在ajax调用中获取文件上传进度状态？

How to get the file uploading progress status in ajax call?

javascript

ajax

jquery

progress-bar