Yii2：如何显示文件上传进度？ [复制]答案

【问题标题】：Yii2: How to show file uploading progress? [duplicate]Yii2：如何显示文件上传进度？ [复制]
【发布时间】：2019-02-19 14:52:18
【问题描述】：

我使用 Yii2 框架。我想显示文件上传进度。我不需要具有拖放或预览功能的复杂界面。只有进度条和可能的“取消”按钮。你能给我举一个简单的例子吗？谢谢。

【问题讨论】：

您是否正在寻找可以与 ActiveForm(JS) 验证以及 ajax 或只是 javascript 一起使用的东西，是否有一个您正在研究的情节，以便可以清楚地了解这个想法，因为我目前正在研究Yii2 的文件管理器插件，包括基于 ajax 的多次上传功能以及跟踪进度，它与 Activeform js 集成并具有扩展的FileValidator，否则如果您只想使用 ajax 上传带有进度的文件，请参阅this跨度>
@MuhammadOmerAslam，感谢您的提示。我用 ajax 和 xhr 做的。

标签： file-upload yii2 progress-bar

【解决方案1】：

最后我用 jQuery ajax 做到了。

js:

function upload() {
var input = $('#archiveInput');
var files = input.prop('files');
if (files.length > 0) {
    var data = new FormData();
    data.append('archive', files[0]);
    $.ajax({
        url: input.data('upload-url'),
        type: 'POST',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function () {
            alert('Upload Complete');
        },
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', onProgress);
                return myXhr;
            }
        }            
    });
}
}

function onProgress(ev) {
if (ev.lengthComputable) {
    var progress = parseInt(ev.loaded / ev.total * 100, 10); 
    $("#progress .progress-bar").css(
        "width",
        progress + "%"
    );
}
}

php 控制器：

public function actionUpload($idSupply)
    {
        $directory = FileHelper::normalizePath(Yii::getAlias('@app') . '/uploads/' . $idSupply);
        if (!is_dir($directory)) {
            FileHelper::createDirectory($directory);
        }
        $fileName = 'archive.zip';
        $filePath = $directory . DIRECTORY_SEPARATOR . $fileName;
        if (is_file($filePath)) {
            unlink($filePath);
        }
        move_uploaded_file($_FILES['archive']['tmp_name'], $filePath);

    }

【讨论】：

如果我提到的链接有帮助，请将问题作为副本关闭，以便将新用户重定向到实际答案以及该答案下最有帮助的 cmets。