Explication détaillée du téléchargement de fichiers jQuery Ajax et d'autres exemples de données à l'aide de FormData-js tutoriel-php.cn

Explication détaillée du téléchargement de fichiers jQuery Ajax et d'autres exemples de données à l'aide de FormData

小云云

Libérer： 2018-01-10 09:31:31

original

3967 Les gens l'ont consulté

Cet article présente principalement l'utilisation de FormData par jQuery Ajax pour télécharger des fichiers et d'autres acquisitions web.py du backend de données. J'espère que cela pourra aider tout le monde.

XMLHttpRequest Level 2 ajoute une nouvelle interface - FormData. Par rapport à l'Ajax ordinaire, le plus grand avantage de l'utilisation de FormData est que nous pouvons télécharger des fichiers binaires de manière asynchrone.

jQuery 2.0+ prend en charge FormData

Méthode 1 : utilisez le formulaire

pour initialiser l'objet FormData afin de télécharger des fichiers

• Front-end (JQuery) :

<form enctype="multipart/form-data">
  <input type="file" name="myfile" onchange="loadFile(this.files[0])">
</form>
<script>
  function loadFile(file){
    var formdata = new FormData($$('form')[0]);
    $.ajax({
      url: 'jobs/add',
      type: 'POST',
      datatype: 'json',
      data: formdata,
      cache:false,
      traditional: true,
      contentType: false,
      processData: false,
      success: function (data) {},
      error: function () {}
    });
  }
</script>

Copier après la connexion

•Backend (web.py) :

class Add:
  def POST(self):
    i = web.input(myfile={})
    print(i['myfile'].filename) #文件名
    print(i['myfile'].value) #文件内容
    print(i['myfile'].file.read()) #文件内容

Copier après la connexion

Remarque :

1. L'attribut enctype de /form-data"

2. Les processData, contentType et le cache dans $.ajax doivent être définis sur false

3. Le backend obtient le nom de champ du fichier via web.input , qui est identique à l'attribut name de la balise d'entrée spécifiée par le frontend

Méthode 2√ : Au lieu de , utilisez l'objet FormData pour ajouter des champs pour télécharger des fichiers

Parfois, nous ne voulons pas utiliser la balise

et la transmettre au backend via ajax. Ce ne sont pas seulement des fichiers, il peut y avoir d'autres paires clé-valeur. Dans ce cas, vous pouvez utiliser cette méthode <.>

• Front-end (JQuery) :

<input type="file" onchange="loadFile(this.files[0])" />
function loadFile(file){
  container.fd = new FormData();
  container.fd.append('myfile',file);
  container.fd.append('otherkey',othervalue);
  $.ajax({
    url: 'jobs/add',
    type: 'POST',
    datatype: 'json',
    data: fd,
    cache:false,
    traditional: true,
    contentType: false,
    processData: false,
    success: function (data) {},
    error: function () {}
  });
}

Copier après la connexion

• Back-end (web.py) :

class Add:
  def POST(self):
    i = web.input(myfile={}, otherkey='')
    print(i['myfile'].filename) #文件名
    print(i['myfile'].value) #文件内容
    print(i['myfile'].file.read()) #文件内容

Copier après la connexion

Remarque :

1. Il n'y a pas de balise (c'est bien de l'avoir)

2.append() méthode Le deuxième paramètre est l'objet fichier, qui a été passé via les paramètres de la méthode loadFile en HTML

3. Le backend obtient le nom du champ du fichier via web.input, qui est le même que le premier paramètre de la méthode append() du frontend

4. . Étant donné que les valeurs obtenues via web.input sont toutes des chaînes, si la paire clé-valeur autre que les fichiers est passée comme nulle, elle sera automatiquement convertie en chaîne « null ». Lors de la gestion de cela, vous devez faire attention aux

Recommandations associées :

Introduction détaillée à l'objet FormData en HTML

Comment utiliser FormData pour soumettre des formulaires et télécharger des images

FormData en JavaScript est utilisé dans les objets

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!