【问题标题】: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。
猜你喜欢
  • 1970-01-01
  • 2011-03-10
  • 2021-11-14
  • 2012-09-24
  • 1970-01-01
  • 2013-01-26
  • 1970-01-01
  • 2011-07-01
相关资源
最近更新 更多