Maison > interface Web > js tutoriel > Comment utiliser correctement FormData pour les téléchargements de fichiers AJAX avec jQuery ?

Comment utiliser correctement FormData pour les téléchargements de fichiers AJAX avec jQuery ?

Mary-Kate Olsen
Libérer: 2024-12-15 17:42:14
original
626 Les gens l'ont consulté

How to Correctly Use FormData for AJAX File Uploads with jQuery?

Utilisation de FormData pour le téléchargement de fichiers AJAX

Dans ce scénario, vous essayez d'implémenter le téléchargement de fichiers AJAX à l'aide d'un glisser-déposer formulaire HTML généré. Cependant, votre implémentation JavaScript actuelle nécessite des ajustements pour utiliser correctement l'objet FormData pour le téléchargement de fichiers.

Préparations

Tout d'abord, créez l'objet FormData :

var form = $('form')[0]; // For the entire form
var formData = new FormData(form);
Copier après la connexion

Vous pouvez également spécifier des données spécifiques à inclure :

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
formData.append('image', $('input[type=file]')[0].files[0]);
Copier après la connexion

Envoi du Formulaire

Ensuite, mettez à jour votre requête jQuery AJAX pour inclure les paramètres suivants :

$.ajax({
    url: 'Your url here',
    data: formData,
    **type: 'POST', // Use POST requests for file upload**
    contentType: false, // Important for file upload
    processData: false, // Important for file upload
    // ... Other options like success and etc
});
Copier après la connexion

Ces paramètres garantissent que les données du formulaire sont envoyées correctement en tant que requête multipart/form-data , ce qui est essentiel pour le téléchargement de fichiers.

Supplémentaire Remarque :

  • contentType : false n'est disponible qu'à partir de jQuery 1.6.
  • Le paramètre type : 'POST' est crucial car les téléchargements de fichiers nécessitent des requêtes POST.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal