Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2018-01-10 09:31:31
Original
3946 Leute haben es durchsucht

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>
Nach dem Login kopieren

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

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 () {}
  });
}
Nach dem Login kopieren
• 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()) #文件内容
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage