带有引导程序，ajax laravel 的进度条答案

【问题标题】：Progress bar with bootstrap, ajax laravel带有引导程序，ajax laravel 的进度条
【发布时间】：2021-08-17 08:03:50
【问题描述】：

我正在尝试在上传文件和在数据库中导入数据时创建进度条。

我用 laravel 和 ajax 用 jquery 创建了一个导入器。在这个导入器中，我正在从 CSV 文件中读取所有数据。我正在从这个文件中获取所有行和列，当我阅读这个文件时，我正在用 eloquent 进行插入查询。这是我的代码：

$fp = fopen($route, 'r');

        // header
        $head = fgetcsv($fp, 4096, ';', '"');
        $header = [];
        
        $header[0] = 'nomape';
        $header[1] = 'direccion';
        $header[2] = 'cp';
        $header[3] = 'ciudad';
        $header[4] = 'provincia';
        $header[5] = 'telefono';
        $header[6] = 'movil';

        $rows = 0;
        $cells = 0;
        
        // Rows
        while($column = fgetcsv($fp, 8192, ';', '"'))
        {
            // build array to can combine header and this array
            $columns = [];
            
            foreach ($column as $val) {
                array_push($columns, $this->delete_accent($val));
            }

            $column = array_combine($header, $columns);
            $result = Listado::insert($column);
            
            if($result){
                $rows++;
            }
            
            $cells++;
        }
        
        fclose($fp);
        return 'Importados un total de: ' .$rows. ' de un total de: ' . $cells;

这些操作需要时间。在我的网络browser console 和network tab 中，我可以在导入我的所有数据时显示我的http 请愿书处于待处理状态。我的 CSV 有一个 69000 寄存器。

使用此代码，我正在构建我的进度条：

$.ajax({    
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = (evt.loaded / evt.total) * 100;
                                // Place upload progress bar visibility code here
                                console.log(percentComplete);
                            }
                        }, false);
                        return xhr;
                    },

但是当这些操作需要很多分钟时，这会以秒为单位返回 100% 的值。我的问题是如何才能获得真正的进度来创建我的进度条？

【问题讨论】：

检查这个：itsolutionstuff.com/post/…
@MartinOsusky 感谢您的回复，但我没有收到表格，我正在发送带有事件更改我的输入文件的文件
@MartinOsusky 是用于上传而不是用于文件处理的进度条。它将在处理第一行服务器端之前显示 100%。
好的，现在我明白你的目标了。这可以帮助你：laracasts.com/discuss/channels/laravel/realtime-progress-bar
@MartinOsusky 安装 laravel echo 并搞乱 websocket 只是为了一次上传？

标签： javascript jquery ajax laravel progress-bar

【解决方案1】：

您需要改变方法并分两步执行 csv 特征，同时重复第二步直到文件结束。

第一步 使用ajax，在不处理数据的情况下进行正常上传。该请求应返回上传的文件标识符和行数。

第二步 使用 ajax，调用要处理的前 100 行（根据自己的喜好更改 100 值）

一旦请求响应，更新进度条（因为您有总行数（100/69000 别名 0.1%）并要求处理接下来的 100 个条目。

重复此操作，直到达到行数。在最后一个过程中，您可以删除文件。

PS：您将需要一些方法来清理垃圾上传（那些他们的进程尚未达到 100%）您可以通过巧妙地命名上传的文件来做到这一点。例如，将上传日期（加上唯一 ID）添加到文件名中，并删除任何早于 24 小时的内容。

【讨论】：

感谢您的回复，您说的我不太明白。我正在使用 ajax 上传我的文件，但我怎么说处理这个文件？在我的代码 php 中，我得到了所有的行和列，但我不明白......这是我第一次使用进度条
@scorpions78 第一次请求，不要循环文件的行。只需返回一些东西来识别文件和行数。一旦你在 Javascript 中得到这些结果，你就可以使用文件的 id 和 skip=0，count=100 进行另一个 ajax 调用。现在在控制器中获取文件（带有 id）并循环前 100 个条目。
@scorpions78 和我一起讨论更多chat.stackoverflow.com/rooms/236076/…

【解决方案2】：

对于上传，您可以使用客户端通知进度（如果您使用的是 ajax）。

xhr.upload.addEventListener("progress", function(evt) {
    if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total  * 100 >>>0;
        // Do something with download progress
        console.log("upload" + percentComplete + "%")

    }
}, false);

对于导入和服务器处理进度，您可以使用 A. WebSockets 服务器或 B. API 服务提供者（例如 rejax.io）。然后，每当服务器取得进展时，您调用 API，客户端就会收到。

// if using PHP for example.
Rejax::send($str_channel_name, $str_message);

适当的披露者：我运行 https://rejax.io 服务

【讨论】：