[Javascript] Lokale Dateien im Browser verwenden/verarbeiten

**Bertinator** · 26. 01. 2012, 02:47

Guten Abend verehrte Gullianer,

mit HTML5 ergeben sich viele neue Möglichkeiten

. Heute habe ich mal die sog. File API näher betrachtet. Ein Beispiel:

Spoiler:

HTML-Code:

<html> <head> <script>
function Init() {
	document.getElementById('files').addEventListener('change', handleFileSelect, false);
	}

function handleFileSelect(evt) {
	var files = evt.target.files; // FileList object

	// files is a FileList of File objects. List some properties.
	var output = [];
	for (var i = 0, f; f = files[i]; i++) {
		output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
		f.size, ' bytes, last modified: ',
		f.lastModifiedDate.toLocaleDateString(), '</li>');
	}
	document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
</script> </head> <body onload="Init()"> <input type="file" id="files" name="files[]" multiple /> <output id="list"></output> </body> </html>

Quelle: www.html5rocks.com - ReadFile-Tutorial

Möchte ich die Dateien nun beispielsweise über einen img-Tag mit dem src-Attribut einbinden ist es ungünstigerweise so, dass die ausgewählten Dateien in den Browser geladen, d.h. in den Cache kopiert werden (soweit ich das verstanden habe). Konkret meine ich damit, dass die jeweilige Datei Base64-Codiert in den Quellcode der Seite geschrieben wird.

Das mag bei einem Bild nicht sonderlich stören, bei einer größeren Datei, wie etwa einem .zip-File kann das allerdings dauern.

So, und nun meine Frage:

Wie kann ich eine Datei im Browser verwenden, ohne sie in den Cache zu kopieren? Also quasi nur eine Referenz erzeugen?
Als Beispiel: Ich möchte ein lokal auf meinem Rechner abgelegtes Musikstück über den Browser wiedergeben, bzw. aus mehreren eine Playlist erstellen.

Vielen Dank schon im Voraus!

**KcDaRookie** · 26. 01. 2012, 06:51

Mit

Code:

file:///Pfad:/zur/Datei.xyz

sollte es gehen.

**Kugelfisch23** · 26. 01. 2012, 12:22

Das Problem dabei ist allerdings, dass in modernen Browsern keine Möglichkeit besteht, den Pfad zur ausgewählten Datei auszulesen (abgesehen davon, dass der Browser ggf. einer Webseite aus dem Internet den Zugriff auf file-URIs verbietet). Siehe etwa http://dev.w3.org/html5/spec/Overvie...value-filename. Schliesslich könnte der Pfad private Daten enthalten, z.B. den Namen des eigenen Benutzerkontos auf dem lokalen Systems.

Das File-API bietet die Möglichkeit, die ausgewählten Dateien auszulesen und deren Namen zu ermitteln. Meines Wissens besteht keine Möglichkeit, direkt ein File-Objekt als Quelle z.B. für ein audio- oder img-Element zu nutzen.

Mir stellt sich auch die Frage, was genau du damit erreichen möchtest. Bedenke, dass die Dateien in jedem Fall zuerst vom Benutzer explizit ausgewählt werden müssen, bevor du auf sie zugreifen kannst. Eine in deinem Beispiel erstellte Playlist wäre demnach nur während eines Besuchs gültig, dann müsste der Benutzer die Dateien neu auswählen, damit du die zugehörigen File-Objekte erhältst.

**Bertinator** · 26. 01. 2012, 18:39

Hallo zusammen,

als Erstes mal danke für die Infos. Vorweg:

Bedenke, dass die Dateien in jedem Fall zuerst vom Benutzer explizit ausgewählt werden müssen, bevor du auf sie zugreifen kannst. Eine in deinem Beispiel erstellte Playlist wäre demnach nur während eines Besuchs gültig, dann müsste der Benutzer die Dateien neu auswählen, damit du die zugehörigen File-Objekte erhältst.

Genau das ist Sinn und Zweck der ganzen Sache. Der User soll sich beispielsweise eine Playlist erstellen, indem er die Songs z.B. per Drag and Drop in den Browser zieht. Es geht hier gar nicht darum, dass ich (als Website-Betreiber) auf die Stücke zugreifen kann, das will bzw. darf ich (wahrscheinlich) auch gar nicht. Der User soll damit arbeiten können, mehr eigentlich nicht.

Um ein anderes Beispiel zu nennen:
Der User zieht Bilder in den Browser, die dann in einer Galerie angezeigt werden. Ob er sie dann i.wo hochlädt ist dabei nicht mal wichtig. Es geht lediglich darum, die Bilder im Browser zu haben.

file:///Pfad:/zur/Datei.xyz

Vielen Dank dafür

Aber kann ich diese Art Pfad-Angabe in einem Javascript verarbeiten?

Wie gesagt, es geht nicht darum, die Bilder oder Songs auf irgendeinen Server zu laden, sondern lediglich Daten, welche lokal auf meinem System sind in einer Website verarbeiten.