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

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>

Le code JavaScript à ce moment est comme suit :

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

 $.ajax({
        url: 'http://10.10.2.254:8080/file/associateupload',
        type: 'POST',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
            console.log(res);
        }
    });

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. ff9c23ada1bcecdd1a0fb5d5a0f18437 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 ff9c23ada1bcecdd1a0fb5d5a0f18437 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>

L'implémentation JavaScript est la suivante :

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

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 3525558f8f338d4ea90ebf22e5cde2bc , ajoutez simplement plusieurs attributs ou plusieurs="multiple" dans 3525558f8f338d4ea90ebf22e5cde2bc.

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!