在 MVC 中使用 jQuery ajax 上传文件进度

Question

我使用 jQuery 通过拖放上传文件没有任何问题。 但我想显示上传文件的百分比（显示上传进度条）， jQuery ajax 中如何实现？

    $('#drag-target-selector').on('dragenter', function (e) {
        console.log('dragenter');
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px solid #0B85A1');
    });

    $('#drag-target-selector').on('dragover', function (e) {
        console.log('dragover');
        e.stopPropagation();
        e.preventDefault();
    });

    $('#drag-target-selector').on('drop', function (e) {
        console.log('drop');
        $(this).css('border', '2px dotted #0B85A1');
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;

        var frmData = new FormData();
        for (var i = 0; i < files.length; i++) {
            frmData.append("file[" + i + "]", files[i]);
        }


        $.ajax({
            url: '@Url.Action("UploadFile")',
            type: 'post',
            data: frmData,
            contentType: false,
            processData: false,
            success: function (rdata) {
                console.log('result =' + rdata);
            }
        });
    });

Answer 1

您可以使用 Uplodify 或 Uploadifive HTML5 版本。上传文件时会显示进度条。