Comment faire pour télécharger un fichier à l'aide de jQuery.ajax et FormData

Lorsque j'utilise XMLHttpRequest, un fichier est correctement téléchargé à l'aide de FormData. Cependant, lorsque je passe à jQuery.ajax, mon code pauses.

C'est le travail le code d'origine: 

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);
    xhr.send(fd);
}

Voici mon échec jQuery.ajax tentative:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xm = $.ajax({
        url: "upload.php",
        type: "POST",
        data: fd,
    });
}

Ce que je fais mal? Comment puis-je obtenir le fichier à charger correctement, à l'aide d'AJAX?

InformationsquelleAutor Harts | 2012-03-08
  1. 166

    Vous devez ajouter processData:false,contentType:false à votre méthode, de sorte que jQuery ne permet pas de modifier les en-têtes ou des données (les pauses de votre code actuel).

    function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);

    $.ajax({
       url: "upload.php",
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           //.. do something
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); //Optional
       }
    });
}
    • J'avais upvote ce 1000 fois si je le pouvais. De toutes les autres réponses à cette question ALORS, ce que marchent le mieux et est le plus simple. merci.
    • Avertissement: FormData n'est pas pris en charge dans internet explorer jusqu'à la version 10.
    • Dans cette réponse (et à la question), ce qui est blobFile? C'est une entrée.val()?
    • C'est un Blob ou File de l'objet, par exemple pour <input type="file" id="filechooser"> il est document.getElementById('filechooser').files[0] (à condition que l'utilisateur a sélectionné un fichier). (en jQuery, $('#filechooser')[0].files[0])
    • f$%#@ IE 9 et 8, ils ne sont que l'arrêt du progrès... 😀
    • S'il vous plaît, et si je veux envoyer un autre aussi, comme les champs de type chaîne, comment cette parole?
    • voir developer.mozilla.org/en-US/docs/Web/API/FormData
    • disons que vous avez réussi à envoyer le fichier via ajax comment voulez-vous récupérer dans le fichier php si, par exemple comme ceci comment pouvez-vous obtenir ce dans le téléchargement.le php?comment pouvez-vous insérer?
    • comme à l'habitude. Ce n'est pas différent d'un autre formulaire de soumission.
    • savez-vous comment le "fd" le Type de Contenu (image/jpeg) ? Merci.
    • Le fd du type de contenu? Je suppose que vous vouliez dire paramètre le type MIME du fichier? Vous pouvez changer le type MIME d'un File à l'aide de la Blob constructeur. Par exemple, si vous souhaitez forcer le image/jpeg type MIME du fichier dans l'exemple, l'utilisation blobFile = new Blob([blobFile],{type:'image/jpeg'}); avant fd.append.
    • Il était comme ça, mon problème était de l'ordre de la S3 champs. ' fd.append('acl', 'public-read-write'); fd.append('key', fileName); fd.append('Content-Type', fichier.type); fd.append("fichier", fichier); ' Grâce.
    • Il ne fonctionne pas pour IE9 et ci-dessous
    • Est-il possible de changer le type MIME de la filies lors de l'envoi des fichiers vers le serveur en appel ajax?
    • Le Blob constructeur prend un "type" paramètre qui spécifie le type MIME. Voir mon contenu ci-dessus à partir du 11 Mai 2015.
    • J'ai un problème lorsque le fichier est plus grand que 10 mo. Croit-on savoir pourquoi?

    InformationsquelleAutor Rob W