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

本文关键字:文件 ajax jQuery MVC | 更新日期: 2023-09-27 18:13:15

我上传文件使用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);
            }
        });
    });

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

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