Ausführliche Erläuterung des Hochladens von Dateien mit jQuery Ajax und anderer Datenbeispiele mithilfe von FormData

In diesem Artikel wird hauptsächlich die Verwendung von FormData zum Hochladen von Dateien und anderen web.py-Daten vorgestellt. Freunde in Not können darauf verweisen.

XMLHttpRequest Level 2 fügt eine neue Schnittstelle hinzu – FormData. Im Vergleich zu gewöhnlichem Ajax besteht der größte Vorteil der Verwendung von FormData darin, dass wir Binärdateien asynchron hochladen können.

jQuery 2.0+ unterstützt FormData

Methode 1: Verwenden Sie das

-Formular, um das FormData-Objekt zum Hochladen von Dateien zu initialisieren

• Frontend (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>

•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()) #文件内容

Hinweis:

1 Das enctype-Attribut von /form-data"

2. ProcessData, contentType und Cache in $.ajax müssen auf false gesetzt werden

3. Das Backend erhält den Feldnamen der Datei über web.input , das mit dem Namensattribut des vom Frontend angegebenen Eingabe-Tags identisch ist

Methode 2√: Verwenden Sie anstelle von das FormData-Objekt, um Felder zum Hochladen von Dateien hinzuzufügen

Manchmal möchten wir das Tag

nicht verwenden und es über Ajax an das Backend übergeben. Es handelt sich nicht nur um Dateien, es können auch andere Schlüssel-Wert-Paare vorhanden sein. In diesem Fall können Sie diese Methode

• 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 () {}
  });
}

• 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()) #文件内容

Hinweis:

1. Es gibt kein -Tag (es ist gut, es zu haben)

2.append()-Methode Der zweite Parameter ist das Dateiobjekt, das durch die Parameter von übergeben wurde die LoadFile-Methode in HTML

3. Das Backend erhält den Feldnamen der Datei über web.input, der mit dem ersten Parameter der Frontend-Append()-Methode identisch ist Da es sich bei den über web.input erhaltenen Werten ausschließlich um Zeichenfolgen handelt, wird das Schlüssel-Wert-Paar außer Dateien automatisch in die Zeichenfolge „Null“ konvertiert. Bei der Handhabung müssen Sie auf

Verwandte Empfehlungen achten:

Detaillierte Einführung in das FormData-Objekt in HTML

So verwenden Sie FormData zum Senden von Formularen und Hochladen von Bildern

FormData in JavaScript wird in Objekten verwendet

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Hochladens von Dateien mit jQuery Ajax und anderer Datenbeispiele mithilfe von FormData. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!