通过AJAX发布Excel文件

Question

有没有办法通过AJAX POST请求发送Excel文件？我已经尝试过了，但我不知道如何通过请求包装文件。AJAX能做到这一点吗？

<form id='file-import' method="POST" enctype="multipart/form-data">
  <meta name="csrf-token" content="{{ csrf_token() }}" />
  <label>Choose File</label>
  <div class="form-group">
    <input type="file" name="file" required="required">
  </div>
  <button type="submit" class="">Import</button>
</form>

$(document).ready(function() {
  console.log('run');
  $('#file-import').submit(function(e) {
    e.preventDefault();
    let form_data = new FormData($(this)[0]);
    console.log(form_data);
    $('#content').hide();
    $('#page-loader').fadeIn();
    $.ajax({
      url: '/test/post',
      type: 'POST',
      data: 'form_data',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      dataType: 'json',
      success: function(data) {
        console.log('success');
      },
      error: function() {
        console.log('error');
      }
    });
    $('#page-loader').fadeOut();
    $('#content').show();
  });
});

Answer 1

这个AJAX请求有两个主要问题。首先，您发送的是字符串文字'form_data'，而不是保存在form_data变量中的实际值。您需要删除它周围的引号。

其次，在发送FormData对象时，需要将contentType和processData属性添加到AJAX请求中，并且它们的值都应该为false。

还要注意，当AJAX请求完成时，您需要调用fadeOut()和show()。您现在拥有这些调用的位置意味着您显示加载程序，然后立即隐藏它，因为请求是异步的。要使其正常工作，请将调用移入AJAX设置中的complete处理程序。试试这个：

$('#file-import').submit(function(e) {
  e.preventDefault();
  let form_data = new FormData($(this)[0]);
  var $content = $('#content').hide();
  var $pageLoader = $('#page-loader').fadeIn();

  $.ajax({
    url: '/test/post',
    type: 'POST',
    data: form_data,
    contentType: false,
    processData: false,
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    dataType: 'json',
    success: function(data) {
      console.log('success');
    },
    error: function() {
      console.log('error');
    },
    complete: function() {
      $content.show();
      $pageLoader.fadeOut();
    }
  });
});