Einführung in die Art und Weise, wie JavaScript Ajax zum Hochladen von Dateien verwendet

Dieser Artikel stellt hauptsächlich den Beispielcode von JavaScript vor, der Ajax zum Hochladen von Dateien verwendet, und stellt die beiden Upload-Methoden im Detail vor.

In diesem Artikel wird die Methode von JavaScript vorgestellt, die Ajax zum Hochladen verwendet Dateien. Der Beispielcode wird wie folgt mit allen geteilt:

Es gibt zwei Hauptmethoden zum Hochladen von Dateien:

Verwenden Sie das Formular, um den

HTML-Code wie folgt einzureichen und hochzuladen:

<form id="uploadForm" enctype="multipart/form-data">
  <input id="file" type="file" name="file"/>
  <button id="upload" type="button">上传</button>
</form>

Der JavaScript-Code lautet derzeit wie folgt:

 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);
        }
    });

Hinweis:

1. processData ist auf false gesetzt. Da es sich bei dem Datenwert um ein FormData-Objekt handelt, besteht keine Notwendigkeit, die Daten zu verarbeiten.

2. ff9c23ada1bcecdd1a0fb5d5a0f18437-Tag fügt das Attribut enctype="multipart/form-data" hinzu.

3. Cache ist auf „false“ gesetzt und das Hochladen von Dateien erfordert kein Caching.

4. contentType ist auf false gesetzt. Da es sich um ein FormData-Objekt handelt, das aus dem Formular ff9c23ada1bcecdd1a0fb5d5a0f18437 erstellt wurde und das Attribut enctype="multipart/form-data" deklariert wurde, wird es hier auf false gesetzt.

Verwenden Sie das FormData-Objekt, um Felder zum Hochladen von Dateien hinzuzufügen

Der HTML-Code lautet wie folgt:

<p id="uploadp">
  <input id="file" type="file"/>
  <button id="upload" type="button">上传</button>
</p>

Die JavaScript-Implementierung ist wie folgt:

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);
  }

Hier gibt es mehrere Unterschiede:

• Append()'s Die beiden Parameter sollten Dateiobjekte sein, also $('#file')[0].files[0]. contentType muss ebenfalls auf false gesetzt werden.

• Aus dem Code $('#file')[0].files[0] können Sie ersehen, dass ein 3525558f8f338d4ea90ebf22e5cde2bc-Tag mehrere Dateien hochladen kann , fügen Sie einfach mehrere oder multiple="multiple" Attribute in 3525558f8f338d4ea90ebf22e5cde2bc hinzu.

Das obige ist der detaillierte Inhalt vonEinführung in die Art und Weise, wie JavaScript Ajax zum Hochladen von Dateien verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!