通过AJAX提交Excel文件

Question

通过AJAX提交Excel文件

3

有没有办法通过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();
  });
});

- Brayen H. K

可能是如何异步上传文件？的重复问题。 - Claude Kirke

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

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

其次，当发送FormData对象时，您需要添加contentType和processData属性，并且它们的值都应为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();
    }
  });
});