Zur Navigation

Multiple File Upload mit JS und Übergabe an PHP

1 Sagan

Hallo ihr Lieben,
ich habe ein funktionales Skript, mit dem man multiple Dateien oder Bilder
aus dem BS aufrufen kann. Leider funktioniert die Übergabe an PHP nicht.
Da ich mit eurem Skript die erste Übergabe einer JS-Variablen an PHP geschafft habe, habe ich mich bei euch eingeloggt.
Nachfolgend der Code der beiden Dateien:

Die index.php:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
	<title>&Uuml;bergabe-Test</title>
</head>
<body>
	<p><strong>Bilder ausw&auml;hlen:</strong></p>
	<form action="index.php" method="post">
		<input type="file" name="filesToUpload" id="filesToUpload" multiple="" onChange="makeFileList();" />
	</form>
		
	<form action="receiver.php" method="post">
		<input type="hidden" name="input" id="input" value="" />
		<button type="submit">Go To Receiver</button>
	</form>
	
	<ul id="fileList"><li>Keine Datei ausgew&auml;hlt!</li></ul>
	
	<script type="text/javascript">
		function makeFileList() {
			var input = document.getElementById('filesToUpload');
			var ul = document.getElementById("fileList");
			while (ul.hasChildNodes()) {
				ul.removeChild(ul.firstChild);
			}
			for (var i = 0; i < input.files.length; i++) {
				var li = document.createElement("li");
				li.innerHTML = input.files[i].name;
				ul.appendChild(li);
			}
			if(!ul.hasChildNodes()) {
				var li = document.createElement("li");
				li.innerHTML = 'Keine Datei ausgew&auml;hlt!';
				ul.appendChild(li);
			}
			document.getElementById('input').value = input;
		}
	</script>
</body>
</html>

Und hier die receiver.php

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
	<title>&Uuml;bergabe-Test</title>
</head>
<body>	
	Ausgew&auml;hlte Bilder:<br />
	<br />	
	<?php echo $_REQUEST['input']; ?>

	<form action="index.php" method="post">
		<button type="submit">Go To Index.php</button>
	</form>
</body>
</html>

Da das erste <form>-Element der index.php den Aufruf startet, um mit der JS-Funktion über ein BS-Fenster eine multiple Auswahl zu ermöglichen, kann ich wohl davon ausgehen, dass dieses Element nicht zur Übergabe an die receiver.php taugt.
Dieses Skript listet mir alle selektierten Dateien auf. Das funktioniert.
Deshalb habe ich ein zweites <form>-Element eingefügt, welches sich auf die JS-Variable input bezieht, und auf receiver.php zielt.
Leider erhalte ich nur "[innerHTMLObjectElement]" als Ausgabe.
Alle Datenpfade und Angaben aller selektierten Dateien werden in dem <input>-Feld der "input.php" angezeigt.
Auf diesen String bin ich scharf, den hätte ich gerne.
Versuche ich da, zu viel in ein Skript zu packen, oder ist es machbar?

29.08.2018 15:07

2 Jörg

input ist hier ein HTML-Objekt. Wenn ich dich richtig verstanden habe, möchtest du die Namen der Dateien übermitteln? die stecken ja in input.files[i].name. Ich würde die Namen in der Schleife einem Array (hier: fileNames) zufügen, welches danach mit join() in eine kommaseparierte Liste ausgegeben wird

            var fileNames = [];
            for (var i = 0; i < input.files.length; i++) {
                var li = document.createElement("li");
                li.innerHTML = input.files[i].name;
                ul.appendChild(li);
                fileNames.push(input.files[i].name);
            }
            /* ... */
            document.getElementById('input').value = fileNames.join();

29.08.2018 16:07

3 Sagan

Hallo Jörg, vielen lieben Dank für die schnelle und kompetente Antwort.
Melde mich nach Test.

29.08.2018 16:20

4 Sagan

PERFECT. Das habe ich nicht erwartet, Vielen Lieben Dank!!!!

ich bekomme jetzt die einzelnen Dateinamen, die ich locker aus einander pflücken kann.
Was ich jetzt noch bräuchte, wären die Dateipfade!
Die stehen auch in dem von der <index.php>-Seite erzeugten input-Feld.
Kann ich diese irgendwie ansprechen?

Hier nochmal die Codes:

index.php:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
	<title>&Uuml;bergabe-Test</title>
</head>
<body>
	<p><strong>Bilder ausw&auml;hlen:</strong></p>
	<form action="index.php" method="post">
		<input type="file" name="filesToUpload" id="filesToUpload" multiple="" onChange="makeFileList();" />
	</form>
		
	<form action="receiver.php" method="post">
		<input type="hidden" name="input" id="input" value="" />
		<button type="submit">Go To Receiver</button>
	</form>
	
	<ul id="fileList"><li>Keine Datei ausgew&auml;hlt!</li></ul>
	
	<script type="text/javascript">
		function makeFileList() {
			var input = document.getElementById('filesToUpload');
			var ul = document.getElementById("fileList");
			while (ul.hasChildNodes()) {
				ul.removeChild(ul.firstChild);
			}
			
			var fileNames = [];
			for (var i = 0; i < input.files.length; i++) {
				var li = document.createElement("li");
				li.innerHTML = input.files[i].name;
				ul.appendChild(li);
				fileNames.push(input.files[i].name);
			}
			if(!ul.hasChildNodes()) {
				var li = document.createElement("li");
				li.innerHTML = 'Keine Datei ausgew&auml;hlt!';
				ul.appendChild(li);
			}
			document.getElementById('input').value = fileNames.join();
		}
	</script>
</body>
</html>

Und hier der Receiver:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
	<title>&Uuml;bergabe-Test</title>
</head>
<body>	
	Ausgew&auml;hlte Bilder:<br />
	<br />	
	<?php echo $_REQUEST['input']; ?>

	<form action="index.php" method="post">
		<button type="submit">Go To Index.php</button>
	</form>
</body>
</html>

Ich hoffe, es gibt eine Lösung.
Danke nochmal, wir kommen weiter.

29.08.2018 17:03

5 Jörg

Das input kann nur einen String an den Server übermitteln. Ein Array kann man z.B. mit JSON.stringify() in einen Strings umwandeln und diesen in PHP per json_decode wieder entschlüsseln. Allerdings enthält input.files mehrere FILE-Objekte, die sich nicht auf diese Weise encodieren lassen. Siehe z.B. auch diesen thread auf stackoverflow:

https://stackoverflow.com/questions/24139216/js-input-file-to-json-with-for-example-json-stringify

Man könnte in der Schleife neben dem Namen weitere Eigenschaften der Dateien einem multidimensionalen Array übergeben und dieses am Ende encodieren. Allerdings sehe ich weder in der Konsole von Firefox noch von Chromium einen Datei-Pfad. Möglicherweise enthalten die FILE-Objekte aus Sicherheitsgründen nur folgende Infos:

lastModified
lastModifiedDate
name
size
type
webkitRelativePath

... wobei webkitRelativePath nicht den absoluten Dateipfad repräsentiert, sondern sich auf das webkitdirectory Attribut bezieht

29.08.2018 18:22 | geändert: 29.08.2018 18:28

Beitrag schreiben (als Gast)





[BBCode-Hilfe]