Maison > interface Web > js tutoriel > le corps du texte

Introduction à la façon dont JavaScript utilise Ajax pour télécharger des fichiers

黄舟
Libérer: 2017-08-10 13:50:07
original
1306 Les gens l'ont consulté

Cet article présente principalement l'exemple de code JavaScript utilisant Ajax pour télécharger des fichiers et présente en détail les deux méthodes de téléchargement. Les amis intéressés peuvent en apprendre davantage

Cet article présente la méthode JavaScript utilisant Ajax pour télécharger. L'exemple de code est partagé avec tout le monde, comme suit :

Il existe deux manières principales de télécharger des fichiers :

Utilisez le formulaire pour soumettre et télécharger le

code HTML comme suit :


<form id="uploadForm" enctype="multipart/form-data">
  <input id="file" type="file" name="file"/>
  <button id="upload" type="button">上传</button>
</form>
Copier après la connexion

Le code JavaScript à ce moment est comme suit :


 var formData = new FormDate($(&#39;#uploadForm&#39;)[0]);

 $.ajax({
        url: &#39;http://10.10.2.254:8080/file/associateupload&#39;,
        type: &#39;POST&#39;,
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
            console.log(res);
        }
    });
Copier après la connexion

Remarque :

  1. processData est défini sur false. Étant donné que la valeur des données est un objet FormData, il n'est pas nécessaire de traiter les données. La balise

  2. ajoute l'attribut enctype="multipart/form-data".

  3. le cache est défini sur false et le téléchargement de fichiers ne nécessite pas de mise en cache.

  4. contentType est défini sur false. Puisqu'il s'agit d'un objet FormData construit à partir du formulaire et que l'attribut enctype="multipart/form-data" a été déclaré, il est défini ici sur false.

Utilisez l'objet FormData pour ajouter des champs pour télécharger des fichiers

Le code html est le suivant :


<p id="uploadp">
  <input id="file" type="file"/>
  <button id="upload" type="button">上传</button>
</p>
Copier après la connexion

L'implémentation JavaScript est la suivante :


var formData = new FormData();
formData.append(&#39;file&#39;, $(&#39;#file&#39;)[0].files[0]);
$.ajax({
  url: &#39;/upload&#39;,
  type: &#39;POST&#39;,
  cache: false,
  data: formData,
  processData: false,
  contentType: false,
  success:function(res){
     console.log(res);
  }
Copier après la connexion

Il existe plusieurs différences ici :

  • Append()'s Les deux paramètres doivent être des objets fichier, c'est-à-dire $('#file')[0].files[0]. contentType doit également être défini sur false.

  • À partir du code $('#file')[0].files[0], vous pouvez voir qu'une balise , ajoutez simplement plusieurs attributs ou plusieurs="multiple" dans .

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!

Étiquettes associées:
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!