So implementieren Sie Datei-Upload- und Download-Funktionen in Javascript

In der modernen Webentwicklung sind das Hoch- und Herunterladen von Dateien häufig anzutreffende Anforderungen. Als eine der Front-End-Entwicklungssprachen bietet JavaScript viele leistungsstarke Toolbibliotheken und APIs zur Verwaltung des Datei-Upload- und Download-Prozesses.

In diesem Artikel wird untersucht, wie Sie JavaScript zum Implementieren von Datei-Upload- und Download-Funktionen verwenden. Zunächst wird die auf HTML5 basierende Datei-API vorgestellt und anschließend jQuery und XMLHttpRequest verwendet, um AJAX-Anfragen zum Implementieren des Datei-Uploads und -Downloads zu senden.

1. Die Datei-API von HTML5

Die Datei-API von HTML5 ermöglicht JavaScript das Lesen und Betreiben lokaler Dateien, einschließlich Hochladen und Herunterladen. Diese API enthält zwei Objekte, File und FileReader, um diese Probleme zu lösen.

1. Dateiobjekt

Dateiobjekt stellt eine lokale Datei dar, die über ein ähnliches Eingabefeld hochgeladen wurde. Dieses Objekt verfügt über eine Reihe von Eigenschaften zur Beschreibung der Datei, z. B. Dateiname, Größe, Typ usw. Es gibt auch Methoden, mit denen der Inhalt dieser Datei gelesen werden kann.

Zum Beispiel:

<input type="file" id="fileInput" />

<script>
const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
console.log(file.name)         // 文件名
console.log(file.size)         // 文件大小
console.log(file.type)         // MIME 类型
</script>

2. FileReader-Objekt

FileReader-Objekt kann zum Lesen von Dateien und zum Speichern des Dateiinhalts im Speicher zur weiteren Verarbeitung verwendet werden. Es gibt drei Ereignisse, die zum Verfolgen des Lesevorgangs verwendet werden: onloadstart, onprogress und onload. Zum Beispiel:

const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
const reader = new FileReader()

reader.onload = function() {
    console.log(reader.result)  // 读取完成后的文件内容
}

reader.readAsText(file)         // 按文本格式读取文件

2. jQuery-Datei-Upload

jQuery ist eine sehr leistungsstarke JavaScript-Bibliothek, die eine große Anzahl leistungsstarker APIs bereitstellt, einschließlich AJAX-Anfragen, die es uns ermöglichen, JavaScript zum Implementieren von Datei-Uploads zu verwenden.

1. Grundlegender Datei-Upload

Die Implementierung des grundlegenden Datei-Uploads ist wie folgt:

<!-- HTML 代码 -->
<form enctype="multipart/form-data" id="form">
  <input type="file" name="file" />
  <button type="button" id="upload">上传</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // JavaScript 代码
  $('#upload').click(() => {
    const formData = new FormData($('#form')[0])
    $.ajax({
      url: '/upload',
      type: 'POST',
      cache: false,
      processData: false,
      contentType: false,
      data: formData,
      success: function (res) {
        console.log(res)
      },
      error: function (err) {
        console.log(err)
      },
    })
  })
</script>

Im obigen Code definieren wir zunächst ein HTML-Formular, einschließlich eines Eingabefelds für den Datei-Upload und einer Upload-Schaltfläche. Verwenden Sie dann die Ajax-Methoden von jQuery, um die Formulardaten asynchron zur Verarbeitung an das Backend zu senden. Beim Senden müssen wir „processData“ und „contentType“ auf „false“ setzen, um sicherzustellen, dass das FormData-Objekt korrekt und ohne Stilisierung an den Server gesendet werden kann.

2. Upload-Fortschritt anzeigen

Um den Fortschritt des Datei-Uploads anzuzeigen, müssen wir die folgenden Änderungen vornehmen:

$('#upload').click(() => {
  const formData = new FormData($('#form')[0])
  $.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    processData: false,
    contentType: false,
    data: formData,
    xhr: function () {
      const xhr = new window.XMLHttpRequest()
      xhr.upload.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
          const percent = Math.round((e.loaded / e.total) * 100)
          console.log(percent + '%')
        }
      }, false)
      return xhr
    },
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    },
  })
})

Im obigen Code übergeben wir die xhr-Funktion an die Ajax-Methode, und diese Funktion gibt das XMLHttpRequest-Objekt zurück . Anschließend verwenden wir die Methode addEventListener, um einen Fortschrittsereignis-Listener hinzuzufügen, den Prozentsatz des Upload-Fortschritts zu berechnen und ihn auf der Konsole auszugeben.

3. XMLHttpRequest-Datei-Download

XMLHttpRequest ist ein JavaScript-Objekt, das zum Erstellen eines Clients verwendet werden kann. Es kann Serverdaten über AJAX-Anfragen abrufen und auch zum Herunterladen von Dateien verwendet werden.

Das Folgende ist ein Beispiel für das Herunterladen von Dateien über XMLHttpRequest:

<a href="#" id="download">下载文件</a>
<script>
  $('#download').click(() => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', '/download', true)
    xhr.responseType = 'blob'
    xhr.onload = function (e) {
      if (this.status === 200) {
        const blob = new Blob([this.response], { type: 'application/octet-stream' })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'file.zip'
        link.click()
      }
    }
    xhr.send()
  })
</script>

Im obigen Code erstellen wir ein neues XMLHttpRequest-Objekt und rufen die open-Methode auf, um eine GET-Anfrage zu öffnen. Wir verwenden das Attribut „responseType“, um dem Server mitzuteilen, dass der erwartete Antworttyp Binärdaten sind. Wenn die Anforderung abgeschlossen ist, verwenden wir das Ereignis „onload“, um die Antwort zu verarbeiten, die Binärdaten der Antwort in ein Blob-Objekt zu konvertieren und einen Link zum Herunterladen zu erstellen die Datei.

Zusammenfassung

In diesem Artikel wird hauptsächlich die Verwendung von JavaScript (einschließlich Datei-API, jQuery und XMLHttpRequest) zur Implementierung des Datei-Uploads und -Downloads vorgestellt. Während des Implementierungsprozesses müssen Sie unter verschiedenen Umständen auf Kompatibilitätsprobleme achten, z. B. auf die Browserkompatibilität sowie auf die Verarbeitung von Formularübermittlungsdaten und die Art und Weise, wie der Fortschritt angezeigt wird. Wenn wir diese verstehen, können wir unsere Anforderungen beim Hoch- und Herunterladen von Dateien besser bewältigen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Datei-Upload- und Download-Funktionen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!