So verwenden Sie die HTML5-Dateischnittstelle, um den Dateidownload auf einer Webseite zu nutzen

Dieser Artikel stellt hauptsächlich vor, wie man die HTML5-Dateischnittstelle zum Herunterladen von Dateien auf einer Webseite verwendet. Jetzt kann ich ihn mit Ihnen teilen.

Datei Die Schnittstelle bietet die Möglichkeit, Informationen zur Datei abzurufen und JavaScript auf der Webseite auszuführen, um auf den Inhalt der Datei zuzugreifen. Als Nächstes stellt Ihnen dieser Artikel die HTML5-Dateischnittstelle vor, mit der Sie die Datei-Download-Funktion auf der Webseite nutzen können. Freunde, die sie benötigen, können auf die

Dateischnittstelle zugreifen, die dateibezogene Informationen bereitstellt und JavaScript ausführt, um darauf zuzugreifen Dateien auf der Webseite.

Das Dateiobjekt stammt aus dem FileList-Objekt, das der Benutzer mithilfe des Eingabe-Tags zum Auswählen der Datei zurückgegeben hat, und stammt aus dem DataTransfer-Objekt des Drag-and-Drop-Vorgangs. Ein File-Objekt ist ein spezieller Blob-Typ, der in jedem Kontext verwendet werden kann, in dem ein Blob verwendet werden kann.

Um Dateien in Webseiten zu verwenden, sind in der Regel folgende Objekte beteiligt: ​​File-Objekt, FileList-Objekt und FileReader-Objekt.

FileList-Objekt

FileList kommt von zwei Stellen, nämlich dem Dateiattribut des Eingabeelements und der Drag-and-Drop-API (beim Ziehen eines file event.DataTransfer.files ist ein FileList-Objekt)

<input id="fileItem" type="file">
var fileList = document.getElementById(&#39;fileItem&#39;).files

Standardeigenschaften des FileList-Objekts

Länge: Dies ist eine schreibgeschützte Eigenschaft. Diese Eigenschaft gibt die Länge des im FileList-Objekt enthaltenen File-Objekts zurück.

Standardmethoden des FileList-Objekts

item(index): Ruft das File-Objekt an der angegebenen Position im FileList-Objekt ab. Es kann in Form eines Array-Index abgekürzt werden

Dateiobjekt

Jedes Element des FileList-Objekts ist ein Dateiobjekt. Das Dateiobjekt ist eine besondere Art von Blob.

Standardeigenschaften des Dateiobjekts

1.lastModified: Gibt den Zeitpunkt zurück, zu dem die Datei geändert wurde, also die Zeit seit dem 1. Januar. 1970 Die Anzahl der Millisekunden, die seit 0:00:00 vergangen sind. Ist ein schreibgeschütztes Attribut

2.name: Gibt den Dateinamen der Datei zurück, auf die das Dateiobjekt verweist. Dies ist ein schreibgeschütztes Attribut

3.type: Gibt den Dateityp zurück der Datei, auf die das Dateiobjekt verweist, vom Typ MINE ist, ist dies ein schreibgeschütztes Attribut.

4.size: Gibt die Dateigröße der Datei zurück, auf die das Dateiobjekt verweist. Dies ist ein schreibgeschütztes Attribut.

Standardmethoden des File-Objekts

Für das File-Objekt ist keine separate Methode definiert, es verfügt jedoch über vom Blob-Objekt geerbte Methoden.

FileReader-Objekt

Das FileReader-Objekt ermöglicht Webanwendungen das asynchrone Lesen von Dateien auf dem Computer des Benutzers.

FileReader() ist ein Konstruktor, mit dem ein neues FileReader-Objekt erstellt werden kann.

var fileReader = new FileReader();

Standardeigenschaften des FileReader-Objekts

1.Fehler: Datei gelesen zurückgeben Beim Abrufvorgang ist ein Fehler aufgetreten.

2.result: Gibt den Inhalt der Datei zurück und der Rückgabewerttyp ist String oder ArrayBuffer. Dieses Attribut ist erst gültig, nachdem der Lesevorgang abgeschlossen ist.

3.readyState: Gibt den aktuellen Status des Lesevorgangs zurück. Die möglichen Werte sind 0: Lesen wurde nicht gestartet, 1: Lesen, 2: Lesen abgeschlossen.

Standardmethoden des FileReader-Objekts

1.abort(): Lesevorgang abbrechen. Der Wert von readyState wird 2.

2.readAsArrayBuffer(Blob): Liest den angegebenen Blob, z. B. ein Dateiobjekt (Dateiobjekt ist ein spezieller Blob). Sobald der Lesevorgang abgeschlossen ist, wird der Wert des readyState-Attributs zu 2 und das Ergebnisattribut ist ein ArrayBuffer, der die Dateidaten darstellt.

3.readAsDataURL(Blob): Liest den angegebenen Blob, z. B. ein Dateiobjekt (Dateiobjekt ist ein spezieller Blob). Sobald der Lesevorgang abgeschlossen ist, wird der Wert des readyState-Attributs zu 2. Das Ergebnisattribut ist eine URL, die die Dateidaten darstellt, und das Datenformat ist eine Base64-codierte Zeichenfolge

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

4.readAsText(Boob,encoding): Liest den angegebenen Blob, z. B. ein Dateiobjekt (Dateiobjekt ist ein spezieller Blob). Sobald der Lesevorgang abgeschlossen ist, ändert sich der Wert des Attributs „readyState“ auf 2 und das Attribut „result“ ist eine Textzeichenfolge, die die Dateidaten darstellt. Der zweite Parameter ist optional und wird verwendet, um die Kodierung der Textzeichenfolge im Ergebnisattribut anzugeben. Der Standardwert ist UTF-8.

FileReader-Objektereignisse

1.abort: Wird ausgelöst, wenn der Lesevorgang beendet wird.

2.Fehler: Wird ausgelöst, wenn während des Lesevorgangs ein Fehler auftritt.

3.load: Wird ausgelöst, wenn der Lesevorgang erfolgreich abgeschlossen wurde.

4.loadend: Wird ausgelöst, wenn der Lesevorgang endet. Es kann weder ein Leseerfolg noch ein Lesefehler sein.

5.loadStart: Wird ausgelöst, wenn der Lesevorgang beginnt.

6.Prozess: Wird beim Lesen ausgelöst.

Dateien in Webanwendungen verwenden

Mit dem Dateiobjekt in HTML5 können Sie auf ausgewählte lokale Dateien zugreifen und Inhalte aus diesen Dateien lesen. Dateiobjekte kommen entweder vom Eingabeelement oder von der Drag-and-Drop-Schnittstelle.

通过input元素选择文件

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

访问通过input选择的文件

var selectedFile = document.getElementById('input').files[0];

上述代码段一次只能选择一个文件，如果一次要选择多个文件，就需要给input元素添加一个multiple属性，并将multiple属性设置我true。在Gecko 1.9.2之前不支持一次选择多个文件。

通过drag and drop接口选择文件

关于drag and drop接口可以查看HTML5 DragEvent。

第一步：创建一个放置区域。一个普通的元素，如p，p等。

第二步：给放置区添加drop，dragenter，dragover事件处理程序。其中起关键作用的是drop事件处理程序。

下面是一个显示缩略图的例子：

<p id=&#39;dropbox&#39; class=&#39;dropbox&#39;></p>
.dropbox{
 border:solid 3px red;
 height:400px;
 width:auto;      
}

var dropbox;
dropbox = document.getElementById("dropbox");
//注册事件处理程序
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}
function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  var files = dt.files;
  handleFiles(files);
}
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;
    if (!imageType.test(file.type)) {
      continue;
    }
    var img = document.createElement("img");
    img.file = file;
    dropBox.appendChild(img); 
    var reader = new FileReader();
    reader.onload =  function() {
        img.src = reader.result; 
        };
    reader.readAsDataURL(file);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5中postMessage API的基本使用

如何用HTML5操作WebSQL数据库

HTML5和jQuery实现搜索智能匹配的功能

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die HTML5-Dateischnittstelle, um den Dateidownload auf einer Webseite zu nutzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!