Comment faire pour télécharger un fichier à l'aide d'Ajax sur le POST?

Je sais, les sujets ne manquent pas sur ce sujet, mais garder avec moi. Je voudrais télécharger un fichier vers le serveur à l'aide d'Ajax ou d'un équivalent.

# html
<form method="post" id="Form" enctype="multipart/form-data">
  {% csrf_token %} # django security
  <input id="image_file" type="file" name="image_file">
  <input type="submit" value="submit">
</form>
# javascript
$(document).on('submit', '#Form', function(e){
  e.preventDefault();

  var form_data = new FormData();
  form_data.append('file', $('#image_file').get(0).files);

  $.ajax({
      type:'POST',
      url:'my_url',
      processData: false,
      contentType: false,
      data:{
          logo:form_data,
          csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), # django security
      },
  });
});
# views.py (server side)
def myFunction(request):
    if request.method == 'POST':
        image_file = request.FILES
        ...
...

Je pense qu'il y a un problème avec la façon dont je l'ai configuré la fonction ajax depuis le mode débogage, toutes les données sont renvoyées à l'exception de la logo.

Je fais quelque chose de mal?

OriginalL'auteur Hiroyuki Nuri | 2017-06-22

  1. 12

    La méthode ci-dessous fonctionne pour moi, il va le soumettre à toute forme de valeur que serialize(). Vous obtiendrez toutes les entrées de formulaire qui est à l'intérieur request.POST et le logo request.FILES

    Essayez ceci:

    $(document).on('submit', '#creationOptionsForm', function(e){
  e.preventDefault();

  var form_data = new FormData($('#creationOptionsForm')[0]);
  $.ajax({
      type:'POST',
      url:'/designer/results/',
      processData: false,
      contentType: false,
      async: false,
      cache: false,
      data : form_data,
      success: function(response){

      }
  });
});

    Mise à jour:

    fondamentalement async:false va faire une requête ajax et arrêter d'exécuter tout autre code js jusqu'au moment demander à obtenir, car le téléchargement du fichier peut prendre un certain temps à charger sur le serveur.

    Tout cache va forcer le navigateur à ne pas mettre en cache les données téléchargées à obtenir des données à jour dans la requête ajax

    La Documentation Officielle ici

    mise à jour de réponse, espérons que cela aide 🙂
    Vous n'avez pas besoin async: false plus (au contraire: si vous le réglez, vous obtiendrez un message d'avertissement dans la console Chromée)
    Synchrone XMLHttpRequest sur le thread principal est déconseillée en raison de ses effets néfastes pour l'expérience de l'utilisateur final. Pour en savoir plus, consultez xhr.spec.whatwg.org.

    OriginalL'auteur Mahesh Singh Chouhan

  2. 2

    En regardant en arrière, plus la réponse est peu pratique et n'est pas recommandé. asnyc: false interrompt l'ensemble de Javascript suffit de télécharger un fichier, vous êtes susceptible de tir à d'autres fonctions lors de l'upload.

    Si vous utilisez JQuery, uniquement pour l'utilisation de ajax, puis je le conseille à l'aide de axios:

    const axios = require('axios');

var formData = new FormData();
formData.append('imageFile', document.querySelector('#image_file').files[0]);

axios({
    method: 'post',
    url: 'your_url',
    data: formData,
    headers: {
        "X-CSRFToken": CSRF_TOKEN, # django security
        "content-type": "multipart/form-data"
    }
}).then(function (response) {
    # success
});

    Axios Documentation

    Jquery/Ajax réponse: 

    var formData = new FormData();
formData.append('imageFile', $('#image_file')[0].files[0]);
formData.append('csrfmiddlewaretoken', CSRF_TOKEN); # django security

$.ajax({
   url : 'your_url',
   type : 'POST',
   data : formData,
   processData: false,
   contentType: false,
   success : function(data) {
       # success
   }
});

    Jquery/Ajax Documentation

    OriginalL'auteur Hiroyuki Nuri