web-dev-qa-db-fra.com

Repli pour FormData dans IE 8/9

FormData n'existe pas dans IE 8/9 mais j'ai besoin de cette fonctionnalité dans ces navigateurs. Y a-t-il une bonne solution de rechange pour cela? 

J'essayerais d'envoyer des données JSON, mais je dois transmettre un fichier au serveur. J'ajoute ce fichier à la formData dans les navigateurs modernes et je ne fais que soumettre une demande XHR. Comme FormData n'existe pas dans IE 8/9, cela échoue évidemment.

// I cant seem to get this to work with a file.
$.ajax({
    url: '/genericHandlers/UploadDocsFile.ashx',
    type: "POST",
    data: model.toJSON(),
    contentType: 'application/json'
    }).done(function  (data) { 
       log('stuff happened!');
    });

Peut-être qu’une alternative serait de créer un faux objet de formulaire en js puis d’ajouter les données à cela? 

javascriptajaxxmlhttprequestfileapi
32
Mike Fielden

Je ne connais qu'une solution possible, mais ce n'est pas vraiment une solution de rechange 1-1 pour les IE. Il n'y a pas d'API de communication possible pour l'envoi de fichiers, car vous ne pouvez pas lier les champs de saisie dans les anciens navigateurs, comme dans les navigateurs modernes utilisant FormData. Mais vous pouvez envoyer le formulaire entier en utilisant un iframe. Dans ce cas, vous pouvez utiliser jquery.form plugin qui prend en charge XHR DataForm et iframe (les données envoyées avec iframe lorsque le navigateur ne prend pas en charge l’API FormData).

8
Dmitry Polushkin

Vous pouvez envoyer le fichier manuellement en utilisant XMLHttpRequests, il y a beaucoup d'informations à ce sujet ici .

Vous pouvez tester si le navigateur peut utiliser d'abord l'objet FormData avec:

if(typeof FormData !== 'undefined')
   ...

MDN a un cette fonction que vous pouvez modifier pour le repli:

var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
var name;

// We turn the data object into an array of URL encoded key value pairs.
for(name in data) {
  urlEncodedDataPairs.Push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}

// We combine the pairs into a single string and replace all encoded spaces to 
// the plus character to match the behaviour of the web browser form submit.
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
4
99 Problems - Syntax ain't one

Cette réponse ne répond pas strictement à la question que vous avez posée, et pour cette raison, je comprends si Mods l’enlèvera.

Cependant, votre question était étroitement liée à un problème sur lequel j’étais en train de chercher qui est comment proposer des téléchargements par glisser-déposer via FormData () avec une dégradation progressive pour les anciens navigateurs?

Il existe une merveilleuse bibliothèque appelée dropzone.js qui offre une solution parfaite à mon problème. La meilleure partie est peut-être que la bibliothèque offre une dégradation progressive prête à l'emploi pour prendre en charge le téléchargement de fichiers sur des navigateurs plus anciens, comme détaillé ici . 

Pour paraphraser la source:

Heureusement, si le navigateur n'est pas pris en charge, la bibliothèque dropzone.js affiche une classe de secours personnalisable contenant un champ de saisie et un bouton d'envoi.

J'espère que ces informations aideront quelqu'un qui, comme moi, recherche une solution simple à mettre en œuvre et élégante pour le téléchargement de fichiers.

0
Jade Steffen