HTML5 -Datei Drag, Drop, Analyse, Lesen und Hochladen

Es war eine arbeitsreiche Woche. Wir haben herausgefunden, wie die neuen HTML5 -APIs uns helfen können, Dateien zu öffnen, zu lesen und hochzuladen, die der Benutzer in das Browserfenster gezogen und fallen gelassen hat. Dieser Artikel fasst die Techniken und die aktuelle Stufe der Browserunterstützung zusammen.

Key Takeaways

• HTML5 -APIs können dazu beitragen, Dateien zu öffnen, zu lesen und hochzuladen, die ein Benutzer in das Browserfenster gezogen und fallen gelassen hat. Diese Funktion wird durch die neuesten Versionen von Chrome, Firefox und Opera unterstützt. Opera kann sie jedoch nur über eine Standarddateieingabe verwenden.
• Das HTML5-Filelist-Objekt ist eine Array-ähnliche Sammlung von Dateiobjekten, und mit dem FileReader-Objekt können Sie Text oder Binärdateien in JavaScript öffnen. Dies ermöglicht es, einen Dateityp und eine Dateityp und Größe zu überprüfen, bevor weitere Verarbeitung oder Uploads auftreten.
• HTML5 ermöglicht die Erstellung von Upload -Fortschrittsbalken, indem er ein „Fortschritt“ -Ereignis an XMLHTTPrequest2 -Objekte angeschlossen wird. Diese Funktion, kombiniert mit der Möglichkeit, Dateien zu ziehen und auszutreten, kann die Verwendbarkeit von Webanwendungen erheblich verbessern.

HTML5 API -Unterstützung

Ihr JavaScript -Code sollte vor dem Anhängen von Ereignishandlern auf die Vorhandensein der Datei-, Filelist- und FileReader -Objekte prüfen. Zum Zeitpunkt des Schreibens werden diese durch die neuesten Versionen von Chrome, Firefox und Opera unterstützt:

if (window.File && window.FileList && window.FileReader) { ... }

Obwohl die Opera diese Objekte unterstützt, können sie nur über eine Standarddateieingabe verwendet werden - nicht durch Drag & Drop. Daher ist eine weitere Überprüfung erforderlich; Ich schlage vor, die XMLHTTPrequest2 -Upload -Methode zu verwenden, z.

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

Datei Drag & Drop

Alle Browser (mit Ausnahme der iPhone und iPad) unterstützen den Dateieingangstyp, der die vertraute Schaltfläche „Durchsuchen“ anzeigt. In HTML5 wurde ein "Mehrfach" -Tribut eingeführt, und wir können dem Feld einen Änderungsereignishandler anschließen:

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

Mit Chrome und Firefox können Benutzer auch eine oder mehrere Dateien in ein ausgewähltes Element ziehen. Sie können Ereignishandler mit „Dragover“ und „Dragleave“ (zum Ändern von Stilen) und „Drop“ zum Erkennen abgelegter Dateien anschließen, z.

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

Abrufen eines filelistischen Objekts

Das HTML5-Filelist-Objekt ist eine Array-ähnliche Sammlung von Dateiobjekten. Dateieingabefelder geben einen Filelisten über eine Dateieneigenschaft zurück (Event.target.files). Droped Dateien geben ein filelistisches Objekt über die DataatRansfer.files -Eigenschaft des Ereignisses zurück (Event.Datatransfer.files). Wir können daher ein filelistisches Objekt mit einem einzelnen Ereignishandler abrufen:

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

Es ist wichtig, das Standard -Ereignis zu kündigen. Dies verhindert, dass der Browser versucht, eine Datei anzuzeigen oder zu verarbeiten, wenn sie in das Fenster fallen gelassen wird.

Dateiobjekte analysieren

Filelistensammlungen enthalten eine Anzahl von Dateiobjekten. Drei nützliche Dateieigenschaften werden bereitgestellt:

1. .Name: Der Dateiname (er enthält keine Pfadinformationen)
2. .typ: Der MIME -Typ, z. Bild/JPEG, Text/Ebene usw.
3. .Size: Die Dateigröße in Bytes.

Es ist möglich, einen Dateityp und -größe zu überprüfen, bevor weitere Verarbeitung oder Uploads auftreten, z.

if (window.File && window.FileList && window.FileReader) { ... }

Weitere Informationen finden Sie unter der Art und Weise, wie Sie abgelassene Dateien mithilfe von HTML5 und JavaScript geöffnet werden.

Dateien mit Filereader

Öffnen Sie Dateien Mit dem HTML5 -FileReader -Objekt können Sie Text oder Binärdateien in JavaScript öffnen. Wie zu erwarten, wird die Methode Readastext () zum Abrufen von Textinhalten verwendet, z.

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

In ähnlicher Weise ruft die metaSdataurl () -Methode Binärbilddaten als codierte Daten -URL ab, die an ein Bild -SRC -Attribut oder ein Canvas -Element übergeben werden kann:

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

Weitere Informationen finden Sie unter der Art und Weise, wie Sie abgelassene Dateien mithilfe von HTML5 und JavaScript geöffnet werden.

Dateien mit Ajax

hochladen Dateien Geeignete Dateien können auf Ihren Server hochgeladen werden, während der Benutzer auf der Seite bleibt. Es geht lediglich darum, ein Dateiobjekt an die Send () -Methode von XMLHTTPREQUEST2 zu übergeben2:

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

Beachten Sie, dass wir den Dateinamen auch als HTTP -Header gesendet haben. Dies ist optional, ermöglicht es uns jedoch, die Datei mithilfe ihres ursprünglichen Namens auf dem Server mithilfe einer Sprache wie PHP neu zu erstellen:

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

Weitere Informationen erhalten Sie unter asynchronem Hochladen von Dateien mithilfe von HTML5 und AJAX.

Erstellen von Upload -Fortschrittsbalken

Wir können auch XMLHTTPREQUEST2 -Ereignisse mit „Fortschritt“ anhängen: Objekte:

// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size < 300000) {
	...
}

Der Handler empfängt ein Ereignisobjekt mit .LADED (die Anzahl der übertragenen Bytes) und .Totale (die Dateigröße) Eigenschaften. Daher kann der Fortschritt berechnet und an ein HTML5 -Fortschritts -Tag oder ein anderes Element übergeben werden, z.

if (file.type.indexOf("text") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
		// get file content
		var text = e.target.result;
		...
    }
    reader.readAsText(file);
}

Weitere Informationen finden Sie in der Erstellung grafischer Datei -Upload -Fortschrittsbalken in HTML5 und JavaScript. Ich hoffe, Sie haben diese Serie genossen. Datei Drag & Drop ist eine wichtige Funktion, die die Benutzerfreundlichkeit der Webanwendungen verändern kann. HTML5 macht es endlich einfach.

häufig gestellte Fragen (FAQs) zum HTML5 -Datei Drag, Drop, Lesen, Analyse und Hochladen von Fortschrittsbalken

Wie kann ich die HTML5 -Drag & Drop -Funktion in meiner Webanwendung implementieren? Zunächst müssen Sie eine Tropfenzone erstellen, die ein Bereich ist, in dem Benutzer ihre Dateien fallen lassen können. Dies kann jedes HTML -Element sein, aber es muss das auf True festgelegte "draggierbare" Attribut festlegen. Als nächstes müssen Sie Event -Hörer für die Ereignisse "Dragover" und "Drop" hinzufügen. Das "Dragover" -Ereignis wird abgefeuert, wenn ein gezogener Artikel über der Drop -Zone liegt und das "Drop" -Event abgefeuert wird, wenn der Gegenstand fallen gelassen wird. Im Ereignishandler für das "Drop" -Event können Sie über die Eigenschaft "DataTransfer.files" des Ereignisobjekts auf die fallengelassenen Dateien zugreifen.

Was ist der Unterschied zwischen "DataTransfer.files" und "DataTransfer.Items"? Die Eigenschaft "DataTransfer.files" ist ein filelistisches Objekt, das die zugezogenen Dateien darstellt. Dies ist nützlich, wenn Sie die fallengelassenen Dateien auf der Serverseite verarbeiten möchten. Andererseits ist "Datatransfer.Iitems" ein DataTransferItemList -Objekt, das alle Dragdaten darstellt. Dies ist nützlich, wenn Sie verschiedene Arten von Dragdaten und nicht nur Dateien verarbeiten möchten. Die Eigenschaft "DataTransfer.files" ist nur in der "Drop" -Event gefüllt. Stellen Sie sicher, dass Sie im richtigen Ereignishandler darauf zugreifen. Zunächst müssen Sie ein neues FileReader -Objekt erstellen. Anschließend können Sie die Methode "Readastext" oder "ReadasDataurl" verwenden, um den Dateiinhalt zu lesen. Die Methode "Readastext" liest die Datei als Textzeichenfolge und die Methode "ReadasDataur" liest die Datei als Daten -URL. Das „Fortschrittsereignis“ wird im Laufe des Uploads regelmäßig abgefeuert. Im Ereignishandler können Sie den Fortschrittsprozentsatz berechnen und die Fortschrittsleiste entsprechend aktualisieren. Stellen Sie sicher, dass Sie die Eigenschaft "Upload" des XMLHTTPREquest -Objekts auf True einstellen, um das Ereignis "Fortschritt" zu aktivieren.

Wie kann ich mehrere Datei -Uploads verarbeiten? Jedes Element im filelistischen Objekt ist ein Dateiobjekt, das eine fallengelassene Datei darstellt. Sie können jede Datei einzeln verarbeiten, indem Sie beispielsweise ihre Inhalte lesen oder auf den Server hochladen. Die Eigenschaft "Typ" ist eine Zeichenfolge, die den MIME -Typ der Datei darstellt. Wenn der Dateityp nicht zulässig ist, können Sie die Drop -Aktion verhindern, indem Sie die Methode "PURTDEFAULT" des Ereignisobjekts im Ereignishandler "Drop" aufrufen.

Wie kann ich mit Drag & Drop -Ereignissen für verschachtelte Elemente umgehen? Um zu verhindern, dass ein übergeordnetes Element ein Drag & Drop -Ereignis für ein untergeordnetes Element empfängt, können Sie die "StopPropagation" -Methode des Ereignisobjekts im Ereignishandler des untergeordneten Elements aufrufen. "Dragleave" und "Drop" -Ereigungshandler. Sie können das Erscheinungsbild der Klasse in Ihrem CSS definieren. Einige Testbibliotheken wie Selen bieten jedoch Methoden zur Simulation von Drag & Drop -Aktionen. Sie können auch ein Mock -Drop -Ereignis erstellen und in das Tropfenzonenelement versenden.

Das obige ist der detaillierte Inhalt vonHTML5 -Datei Drag, Drop, Analyse, Lesen und Hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!