Question

我在使用应用中的文件导入数据时使用进度条时出现问题

这在Firefox中运行良好，但在Chrome中，进度条仅从0％到100％。

我选择用异步错误来jquery ajax，因为有30000行的文件没有资源

Thanx求助

使用Javascript：

function processCsvFile(url) {
    $('#progressBarBulkImportDiv').addClass('show').removeClass('hide');
    $('#fileSelectDiv').addClass('hide');
    $('#fileUploadInfos').addClass('hide');
    $('#upload').addClass('hide');
    document.getElementById('progressBarBulkImport').innerHTML = '0%';
    var fileUpload = document.getElementById("fileUpload");
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
    if (regex.test(fileUpload.value.toLowerCase())) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var rows = e.target.result.split("\n");
            console.log(rows);
            var totalRows = rows.length - 1;
            localStorage.setItem("totalRows", totalRows);
            var successRows = 0;
            var currentRow = 0;
            for (var i = 1; i < rows.length; i++) {
                console.log("line" + i);
                var cells = rows[i].replace(/[/]/g, "-5-8-3-");
                urlajax = url + cells;
                $.ajax({
                    url: urlajax,
                    async: false,
                    success: function (result) {
                        console.log("etape 4");
                        currentRow = parseInt(currentRow) + parseInt('1');
                        var reglede3 = Math.round(parseInt(currentRow) * parseInt('100') / parseInt(totalRows)).toString();
                        console.log(reglede3 + '%');
                        document.getElementById('progressBarBulkImport').innerHTML = reglede3 + '%';
                        $('#progressBarBulkImport').width(reglede3+'%').attr('aria-valuenow', reglede3);
                        successRows = parseInt(successRows) + parseInt(result);
                        if (parseInt(currentRow) == parseInt(totalRows))
                        {
                            console.log("5");
                            localStorage.setItem("successRows",successRows);
                            $('#resultInsertFile').addClass('show').removeClass('hide');
                            document.getElementById('resultInsertFile').innerHTML = localStorage.getItem("successRows")+"/"+localStorage.getItem("totalRows")+' correctement inséré(s)';
                            $('#progressBarBulkImport').removeClass('active');
                        }
                    }
                });
            }
        };
        reader.readAsText(fileUpload.files[0]);

    } else {
        alert("Merci de charger un CSV valide");
    }
}

Html：

<form action="#" method="post" class="form-horizontal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title font_exo_2" id="myModalLabel">Import Assets SCOPE GP via .csv</h4>
            </div>
            <div class="modal-body">
                <div class="main_container">
                    <input type="hidden" name="formAction" value="addViaFile">
                    <div class="form-group paddingViaFile">
                        <div class="input-group" id="fileSelectDiv">
                            <span class="input-group-btn">
                                <span class="btn btn-primary btn-file">
                                    Parcourir&hellip; <input type="file" id="fileUpload" accept=".csv">
                                </span>
                            </span>
                            <input type="text" class="form-control" readonly>
                        </div>
                        <span class="help-block" id="fileUploadInfos">
                            Télécharger un fichier .csv vide au bon format <a href="{{ asset('examples/scope_import_example.csv') }}" class="alert-link">Ici</a>
                        </span>
                        <div class="progress hide" id="progressBarBulkImportDiv">
                            <div class="progress-bar active progress-bar-success progress-bar-striped" id="progressBarBulkImport" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%">
                            </div>
                        </div>
                        <div class="hide text-center" id="resultInsertFile"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-success" id="upload" onclick="processCsvFile('/ajax/insert/scope_import/');">Envoyer</button>
            </div>
            </form>

使用异步“false”的控制台日志：

iam.js:92 line1
iam.js:99 etape 4
iam.js:102 0%
iam.js:92 line2
iam.js:99 etape 4
iam.js:102 0%
iam.js:92 line3
iam.js:99 etape 4
iam.js:102 0%
iam.js:92 line4
iam.js:99 etape 4
iam.js:102 0%
iam.js:92 line5
iam.js:99 etape 4
iam.js:102 0%
iam.js:92 line6
iam.js:99 etape 4
iam.js:102 1%
iam.js:92 line7
iam.js:99 etape 4
iam.js:102 1%
iam.js:92 line8

使用async“true”的控制台日志：

line1 iam.js:92:17
line2 iam.js:92:17
line3 iam.js:92:17
lineXXX iam.js:92:17
lineXXX iam.js:92:17
line30587 iam.js:92:17

etape 4 iam.js:98:25
0% iam.js:101:25
etape 4 iam.js:98:25
0% iam.js:101:25
etape 4 iam.js:98:25
0% iam.js:101:25
etape 4 iam.js:98:25
0% iam.js:101:25
etape 4 iam.js:98:25
0% iam.js:101:25
etape 4 iam.js:98:25
1% iam.js:101:25
etape 4 iam.js:98:25
1% iam.js:101:25
etape 4 iam.js:98:25
1% iam.js:101:25
etape 4 iam.js:98:25
1% iam.js:101:25
etape 4 iam.js:98:25
1% iam.js:101:25
etape 4 iam.js:98:25
1% iam.js:101:25

Answer 1

好奇，如果我补充：

if (reglede3 % 5 === 0 ) {
                        document.getElementById('progressBarBulkImport').innerHTML = reglede3 + '%';
                        $('#progressBarBulkImport').width(reglede3+'%').attr('aria-valuenow', reglede3);
                    }

工作正常

Javascript进度条无法在Chrome中运行，在Firefox中运行良好

1 个答案: