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

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 , 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!