2

我正在使用 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 来做到这一点？

4

1 回答 1

0

您一次上传所有数据，然后服务器处理您的数据，完成后返回结果。您实际上想要每个单行流程数据的长期运行流程的状态。为此，您实际上需要一个单独的 php 文件和 ajax 调用。您的原始 php 文件应更新会话或数据库中的状态，如下所示，

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

请注意，这段代码应该在处理数据的循环中。您应该启动（）和关闭（）这个特定的会话，因为不能在其他进程中打开相同的会话，因为我们需要从第二个 php 文件访问这个会话，如下所示，

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

现在服务器端代码没问题，你需要定期查询第二个 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);
});
于 2019-02-19T09:45:37.573 回答