Отображение каждой строки данных построчно во время загрузки файла AJAX CSV - PullRequest
Новая
       11

Отображение каждой строки данных построчно во время загрузки файла AJAX CSV

0 голосов
/ 19 февраля 2019

Я использую papaparse, Jquery AJAX, PHP и успешно завершил синтаксический анализ csv. Однако я хотел бы отображать данные во время загрузки моего CSV-файла.

Вот немного моего кода;

var xhr_file = null;
$('#fileVariants').change(function(e){
  var file = e.target.files[0];
  splitFileName = file['name'].split(".");
  fileType = splitFileName.slice(-1)[0];
  if(fileType != 'csv')
  {
    $('.error-message').html('<br /><div class="notification is-warning">Only CSV file extension is allowed!</div><br />');
  }
  else
  {
    Papa.parse(file, {
      header: false,
      dynamicTyping: true,
      skipEmptyLines: true,
      complete: function(results, file) {
        file_arr = results.data;
        file_chunk = results.data;
        $('#uploadVariantsBtn').attr('disabled', false);
      }// End complete: function(results, file)
    });
  }

});
$(function(){
    $('#uploadVariants').submit(function(e){
    if($('#fileVariants').val() == '')
    {
        $('.error-message').html('<div class="alert alert-danger" role="alert">File is required!</div><br />');
        return false;
    }

    var method = $(this).attr('method');
    var url = $(this).attr('action');
    var parameters = 'row=' + JSON.stringify(file_chunk);
    xhr_file = $.ajax({
        type : method,
        url : url,
        data : parameters,
        cache : false,
        async: false,
        dataType : "script",
        beforeSend: function(xhr){
            $('#uploadVariantsBtn').attr('disabled', true);
            $('.error-message').html('<br /><div class="notification is-info has-text-centered"><img width="110" src="{{ asset("img/loading.gif") }}" title="Uploading" /></div>');
            $('.error-message').show();
            if (xhr_file != null)
            {
                xhr_file.abort();
            }
        }
    }).complete(function(data){
        $('#uploadVariantsBtn').attr('disabled', false);
        $('.error-message').html('<div class="alert alert-success" role="alert">Product Variants has been updated!</div><br />');
      // $('.show-results').html('<h3>Product Variants have been updated!</h3>');
    }).fail(function(jqXHR, textStatus){
        console.log('Request failed: ' + textStatus);
    });
    return false;
    e.preventDefault();
    });
});

Таким образом, вместо отображения индикатора загрузки при загрузке, я хотел бы отображать каждую строку данных построчно, чтобы показать прогресс.

Например: 

Product Data 1 has been successfully updated!
Product Data 2 has been successfully updated!
Product Data 3 already exist!
Product Data 4 has been successfully updated!
Product Data 5 has been successfully updated!

Есть ли способ сделать это, используя PHP, Javascript, AJAX?

1 Ответ

0 голосов
/ 19 февраля 2019

Вы загрузили все свои данные за один раз, затем сервер обработает ваши данные, по завершении возвращает результат.Вы на самом деле хотите, чтобы длительный статус процесса каждой отдельной строки данных процесса.Для этого вам на самом деле нужен отдельный php-файл и вызов ajax.Ваш оригинальный php-файл должен обновлять статус в сеансе или дБ, как показано ниже, 

session_start();
$_SESSION['status'] = $status;
session_write_close();

Обратите внимание, что этот фрагмент кода должен находиться внутри цикла обработки данных.Вы должны запустить () и закрыть () этот конкретный сеанс, потому что этот сеанс не может быть открыт в другом процессе, так как нам нужно получить доступ к этому сеансу из 2-го файла php, который выглядит следующим образом: 

ob_start();
session_start();
session_write_close();
$output = array();
$output['status'] = $_SESSION['status'];
echo json_encode($output);

Теперь сервербоковой код в порядке, вам нужно запросить 2-й php с регулярным интервалом, чтобы получить статус обработки, 

var timeout = setInterval('showUpdate()', 1000);
function showUpdate(){
$.get( "2ndPhp.php", function( data ) {
    var returnData = data.status;

    if (returnData.length>0){
        // This is server returned update data, you can show this or convert it to 
       //progressbar
    }

}, "json");
}

Когда основной процесс завершится, вы можете закрыть этот цикл, закрыв этот интервал. 

.complete(function(data){
 clearInterval(timeout);
 $('#uploadVariantsBtn').attr('disabled', false);
    $('.error-message').html('<div class="alert alert-success" role="alert">Product 
 Variants has been updated!</div><br />');
  // $('.show-results').html('<h3>Product Variants have been updated!</h3>');
}).fail(function(jqXHR, textStatus){
    console.log('Request failed: ' + textStatus);
});
...