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. -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 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 -Tag mehrere Dateien hochladen kann , fügen Sie einfach mehrere oder multiple="multiple" Attribute in 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!