进度条 bootstrap、ajax laravel

Question

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

我用 laravel 创建了一个导入器，用 jquery 创建了一个导入器 ajax。在这个导入器中，我从 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;

这些操作需要时间。在我 network tab 的网站 browser console 中，我可以在导入所有数据时显示我的 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;
                    },

但是这个 returns 100% 的值以秒为单位，而这些操作需要花费很多分钟。我的问题是如何才能真正取得进展来创建我的进度条？

Answer 1

您需要改变方法，分两步完成 csv traitement，同时重复第二步直到文件结束。

第一步 使用ajax，进行正常上传而不处理数据。请求应该 return 带有行数的上传文件标识符。

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

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

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

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

Answer 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服务

进度条 bootstrap、ajax laravel

Progress bar with bootstrap, ajax laravel

javascript

ajax

jquery

laravel

progress-bar