So öffnen Sie fallengelassene Dateien mit HTML5

In meinem letzten Beitrag verwenden Sie HTML5 -Datei Drag & Drop Wir haben festgestellt, wie die HTML5 -Datei -API verwendet, Drag & Drop -Ereignisse implementiert und Dateiinformationen abgerufen werden. Heute werden wir versuchen, Dateien auf dem Client mit JavaScript zu laden.

Warum lokale Dateien in JavaScript öffnen?

Das Hochladen von Dateien aus einem HTML -Formular ist klobig. Menschen verwenden es oft, wenn sie Multi-Megabyte-Fotos von ihrer Kamera auf einen Webserver übertragen. Unter der Annahme, dass sie die Datei finden, könnte der Upload einige Minuten dauern, nur um festzustellen, dass es sich um das falsche Foto, ein nicht unterstütztes Format oder eine größere Dateigröße als erlaubt handelte. Bisher mussten sich Entwickler auf Flash oder andere Plugins verlassen, um eine bessere Benutzererfahrung zu bieten. Die Vorverarbeitung in JavaScript bietet eine Reihe von Vorteilen:

• lokale Dateiverarbeitung ist schnell.
• Dateien können analysiert werden, um sicherzustellen, dass sie das richtige Format und niedriger als eine bestimmte Größe sind.
• Dateien wie Bilder können vor dem Upload vorbewertet werden.
• Es ist möglich, ein Bild auf einem Canvas -Element zu erregen oder zu ändern und dann die resultierende Datei hochzuladen.

Das FileReader -Objekt

FileReader ist Teil der W3C -Datei -API und bietet vier Methoden zum asynchronen Laden von einer Datei, auf die in einem Dateiobjekt verwiesen wird:

• .readaStext (Datei F, [Codierung]): Lesen Sie die Datei F in eine Zeichenfolge. Die UTF-8-Codierung wird angenommen, aber der optionale Codierungsparameter kann ein anderes Format angeben.
• .ReadasDataurl (Datei F): Lesen Sie die Datei F in eine codierte Daten -URL
• .ReadasBinaryString (Datei F): Lesen Sie die Datei F als binäre Zeichenfolge
• .readasArrayBuffer (Datei F): Liest Datei F als ArrayBuffer -Objekt.

Im folgenden Code verwenden wir die ersten beiden Methoden zum Laden und Anzeigen von Text- und Bilddateien.

asynchron öffnen in JavaScript

// output file information
function ParseFile(file) {

	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
	
}

Hier ist unsere ursprüngliche ParseFile () -Funktion, die ein Dateiobjekt übergeben wird, wenn es auf das Element #FiledRag ausgewählt oder fallen gelassen wird:

	// display text
	if (file.type.indexOf("text") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong></p><pre class="brush:php;toolbar:false">" + 
				e.target.result.replace(/, "<").replace(/>/g, ">") +
				"

" ); } reader.readAsText(file); } Nach der Status -Update überprüfen wir, ob wir über eine Textdatei (Text/Klartext, Text/HTML, Text/CSS usw.) verfügen, sie verwenden Sie die Methode fileReader.readaStext () und zeigen Sie das Ergebnis an (nach dem Entweichen ):

	// display an image
	if (file.type.indexOf("image") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong><br>" +
				'<img  src="'%20+%20e.target.result%20+%20'" alt="So öffnen Sie fallengelassene Dateien mit HTML5" ></p>'
			);
		}
		reader.readAsDataURL(file);
	}

In ähnlicher Weise können wir überprüfen, ob wir eine Bilddatei (Bild/JPEG, Bild/GIF, Bild/PNG usw.) haben, sie mit der Methode fileReäen.ReadasDataurl () in eine Daten -URL laden und das Ergebnis an das SRC -Attribut eines IMG -Tags übergeben haben: Bitte sehen Sie sich die Demonstrationsseite in Firefox, Chrome oder Opera an (keine Drag & Drop -Unterstützung). Sie können auch die Dateien herunterladen Um den Code zu untersuchen. Dies ist zwar nützlich, aber letztendlich müssen wir unsere Dateien auf einen Webserver hochladen. Seien Sie gespannt auf , wie Sie asynchron Dateien mithilfe von HTML5 und AJAX

……

häufig gestellte Fragen (FAQs) zu HTML5 und JavaScript Open Dolped Dateien

Was ist der Zweck der Verwendung von HTML5 und JavaScript zum Öffnen von abgelassenen Dateien? Mit dieser Funktion können Benutzer Dateien von ihrem lokalen System auf eine Webseite ziehen und fallen lassen. Sobald Sie fallen gelassen wurden, können die Dateien mit JavaScript gelesen und verarbeitet werden. Dies kann besonders nützlich für Aufgaben wie das Hochladen von Dateien, das Lesen von Dateiinhalten oder die Verarbeitung von Bildern oder Dokumenten in einer Webanwendung sein.

Wie funktioniert die Drag & Drop -Funktion in HTML5? Wenn ein Benutzer eine Datei in seinem System auswählt und sie über eine Webseite zieht, wird das "Dragover" -Ereignis ausgelöst. Wenn die Datei fallen gelassen wird, wird das "Drop" -Ereignis ausgelöst. Die DataTransfer -Eigenschaft, die Teil dieser Ereignisse ist, enthält die Dateidaten und kann zum Zugriff auf die Datei verwendet werden. Sobald eine Datei auf eine Webseite fallen gelassen wurde, kann sie über die DataTransfer -Eigenschaft zugegriffen werden. Es kann ein neues FileReader -Objekt erstellt werden und die Methode Readastext oder ReadasDataurl kann zum Lesen des Dateiinhalts verwendet werden. Auf das Ergebnis kann im "Laden" des FileReader -Objekts zugegriffen werden.

Kann ich mehrere fallengelassene Dateien gleichzeitig öffnen? Die DataTransfer -Eigenschaft bietet eine "Dateien" -Mobilie, die ein filelistisches Objekt ist. Dieses Objekt stellt eine Liste aller fallengelassenen Dateien dar. Sie können diese Liste durchlaufen, um auf jede Datei einzeln zugreifen zu können und zu verarbeiten.

Welche Dateien können ich mit HTML5 und JavaScript öffnen? Wie Sie die Datei verarbeiten, hängt jedoch von ihrem Typ ab. Beispielsweise können Textdateien als Text gelesen werden, während Bilddateien als Daten -URLs gelesen und mit einem IMG -Element angezeigt werden. Wenn die Dateidaten jedoch an einen Server gesendet werden, sollte sie ordnungsgemäß validiert und saniert werden, um Sicherheitsprobleme zu verhindern. Es kann jedoch Unterschiede in der Implementierung dieser Merkmale geben. Daher ist es wichtig, Ihren Code in verschiedenen Browsern zu testen, um die Kompatibilität zu gewährleisten. Wenn die Datei beispielsweise ein Bild ist, kann sie als Daten -URL gelesen und als SRC -Attribut eines IMG -Elements festgelegt werden. Wenn es sich bei der Datei um eine Textdatei handelt, kann ihr Inhalt in ein Textelement eingefügt werden. Wenn der Dateityp nicht mit den zulässigen Typen übereinstimmt, können Sie eine Fehlermeldung anzeigen und die Datei ignorieren. Die Drag & Drop -Funktion hängt nicht vom Speicherort der Dateien ab. Solange die Dateien vom Benutzer zugegriffen werden können, können sie auf eine Webseite geschleppt und fallen gelassen werden.

Das obige ist der detaillierte Inhalt vonSo öffnen Sie fallengelassene Dateien mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!