Question

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

Answer 1

您一次上传了所有数据，然后服务器处理了您的数据，完成后返回结果。实际上，您需要每个行处理数据的长期运行状态。为此，您实际上需要一个单独的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);
});

在AJAX CSV文件上传期间逐行显示每个数据

1 个答案: