Poster un fichier Excel via AJAX

Question

Existe-t-il un moyen d'envoyer un fichier Excel via une requête AJAX POST ? J'ai essayé, mais je ne sais pas comment envelopper le fichier dans la requête. AJAX peut-il le faire ?

<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

Vous avez deux problèmes principaux avec cette requête AJAX. Premièrement, vous envoyez la chaîne littérale 'form_data' et non la valeur réelle détenue dans le form_data variable. Vous devez supprimer les guillemets qui l'entourent.

Deuxièmement, vous devez ajouter le contentType y processData à la requête AJAX lors de l'envoi d'un objet FormData, et leurs deux valeurs doivent être false .

Notez également que vous devez appeler fadeOut() y show() lorsque la demande AJAX est terminée. L'emplacement actuel de ces appels signifie que vous affichez le chargeur, puis le cachez immédiatement car la requête est asynchrone. Pour que cela fonctionne correctement, déplacez les appels dans un fichier de type complete dans les paramètres AJAX. Essayez ceci :

$('#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();
    }
  });
});