• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Inhalt eines Verzeichnisses auf dem Server mit JavaScript lesen

I

irena_2015

New member
Hallo,

ich möchte nur mit HTML5- und JavaScript-Techniken folgendes erreichen:
Im Browser eine Auswahlliste aller Dateien eines bestimmten Verzeichnisses anzeigen. Davon kann eine Datei ausgewählt werden und deren Inhalt gelesen und im Browser angezeigt werden.

Ist es überhaupt möglich? Und wenn ja, mit welchen Techniken?

Gruß
Irena
 
Zuletzt bearbeitet von einem Moderator:
Wenn ein Apache-Server mit Standard-Einstellungen vorliegt und keine index-Datei in dem jeweiligen Verzeichnis definiert wurde, genügt ein IFrame mit der URL, die auf das Verzeichnis zeigt.
 
Sehe ich das richtig, dass es dabei um das lokale Dateisystem geht? Wenn ja, könntest du per <input type="file"> eine Datei auswählen und dann über die File-API den Inhalt auslesen.
 
genau.
Das habe ich auch gestern versucht zu implementieren und zu testen. Leider funktioniert mein Programm nicht. Hier ist der Sourcecode:

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>

<body>

Wählen Sie eine Eingabedatei
<input type="file" id="fileinput" />
<output id="list"></output>

<script type="text/javascript">
  function readFile(evt) {
    var f = evt.target.files[0]; 
	var output = [];
    if (!f) {
        output.push('<font color="red">' + 'Failed to load file' + '</font>');
    } else if (!f.type.match('text.*')) {
		    output.push('<font color="red">' + f.name + ' is not a valid text file' + '</font>');
    } else {
			if ( window.FileReader && window.File && window.FileList && window.Blob ) {
				var r = new FileReader();
				r.onload = function(e) {
					var contents = e.target.result;
					output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
					f.size, ' bytes, last modified: ',
					f.lastModifiedDate.toLocaleDateString(), '</li>');
					output.push('Inhalt:<br>' + contents);
				};	
				r.readAsText(f);
			} else {
				output.push('<font color="red">' + 'Error: seems File API is not supported on your browser' + '</font>');
			}	
    } 
	document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }
  document.getElementById('fileinput').addEventListener('change', readFile, false);
</script>

</body>
</html>

Was mache ich falsch?
 
Zuletzt bearbeitet von einem Moderator:
Ich habe bei mehreren Browser probiert. Nur IE beim Benutzen der Taste F12 meldet ein Fehler bei document.getElementById('fileinput').addEventListener('change', readFile, false);:
Das Objekt unterstützt die Eigenschaft oder Methode "addEventListener" nicht

Und ich verstehen nicht warum?

PS: Wie kann ich in der Konsole schauen?
 
Das ist die Konsole. Da bist du richtig. Und bei der Fehlermeldung gibt es vermutlich die Node zu diesem Zeitpunkt (noch) nicht.
 
ich habe es jetzt hingekriegt. Meine Anwendung scheint jetzt in allen Browser zu funktionieren. Mein Sourcecode sieht jetzt so aus:

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>

<body>

Wählen Sie eine Eingabedatei
<input type="file" id="fileinput" />
<output id="list"></output>

<script type="text/javascript">
  function readFile(evt) {
    var f = evt.target.files[0]; 
	var output = [];
    if (!f) {
 		document.getElementById('list').innerHTML = '<ul>' + '<font color="red">' + 'Failed to load file' + '</font>' + '</ul>';
    } else if (!f.type.match('text.*')) {
		document.getElementById('list').innerHTML = '<ul>' + '<font color="red">' + f.name + ' is not a valid text file' + '</font>' + '</ul>';
	} else if ( !window.FileReader || !window.File || !window.FileList || !window.Blob ) {
		document.getElementById('list').innerHTML = '<ul>' + '<font color="red">' + 'Error: seems File API is not supported on your browser' + '</font>' + '</ul>';
	} else {
        var r = new FileReader();
		r.onload = function(e) {
			var contents = e.target.result;
			output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
			f.size, ' bytes, last modified: ',
			f.lastModifiedDate.toLocaleDateString(), '</li>');
			output.push('Inhalt:<br>' + contents);
			document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
		}
        r.readAsText(f);
    } 
  }
  document.getElementById('fileinput').addEventListener('change', readFile, false);
</script>

</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
ok. Ich habe gesehen du hast die Code Tags geändert. Aber wie kann ich das machen? Ich kopiere einfach mein Code in das Textfenster.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben