Multi-Upload Formular Link ausgeben

J

j-l-n

Guest
Ich bin auf folgendes Formular gestoßen, was den Upload mehrer Dateien inklusive Fortschrittsanzeige ermöglicht: Mini AJAX File Upload Form | Tutorialzine
dort auch die betreffende Demo.

Nun habe ich allerdings das Skript, dass die Datei serverseitig verarbeitet, etwas angepasst - und zwar wird die Datei umbenannt (Auszug davon hier:)

PHP: 
// Neuen Dateinamen zusammenbauen
$umbenannt = $DateiName.'_'.$unique_id.'.'.$DateiErweiterung;

$ziel='uploaded-files'."/".$umbenannt; move_uploaded_file($temp_datei,$ziel);

$meldung = "<h4>'{$_FILES['datei']['name']}' wurde erfolgreich hochgeladen.<br>Downloadlink: <a href='uploaded-files/$umbenannt' title='$umbenannt' target='_blank'>$umbenannt</a></h4>";


Ich möchte in der Liste der hochgeladenen Dateien jeweils die zugehörigen Downloadlinks, also "$meldung" anzeigen lassen. Jedoch habe ich keine Ahnung wie das gehen soll - alles, was ich funktioniert hatte, hat nicht geklappt.
Nochmal an dieser Stelle der Hinweis auf die oben verlinkten Projektdateien, insbesondere die "assets/js/script.js", die die Liste der hochgeladenen Dateien zu erzeugen scheint.


_______________________
Vielen Dank im Voraus,

Julian
 
Ich hätte jetzt gesagt (ohne mir die Projektdateien angeschaut zu haben) einfach ein echo $meldungen; - Das Serverseitige Script scheint mir (laut demo) per Ajax aufgerufen zu werden. Wenn dem so ist, könnte das echo den Rückgabewert ans JS liefern.

Oder hattest du das schon versucht?
 
Die Antwort des AJAX-Requests wird aber nicht auf der Seite dargestellt, sondern als JSON geparst und dann irgendwas damit gemacht.

@Julian: Kannst du die Stelle finden, in der das JSON ausgegeben wird? Dann könntest du sehen, welche Variable da verwendet wird und die dann um ein Mitteilungsfeld erweitern. In den ganzen Callbacks, die da im JS auskommentiert sind, findest du dann sicherlich einen geeigneten, in dem du dann die Nachricht darstellen kannst.
 
Entschuldigt bitte, dass ich mich erst jetzt zurückmelde.
hier die originale, unveränderte PHP, die für die Verarbeitung des Uploads zuständig ist. Die gibt ja auch per echo irgendwie aus, ob der Upload erfolgreich war oder nicht:

PHP: 
<?php

$allowed_extensions = array('png', 'jpg', 'gif','zip');

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

	$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

	if(!in_array(strtolower($extension), $allowed_extensions)){
		echo '{"status":"error"}';
		exit();
	}

	if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
		echo '{"status":"success"}';
		exit();
	}
}

echo '{"status":"error"}';
exit();

?>
 
Zuletzt bearbeitet:
Da hast du doch die Stelle mit dem JSON... das kannst du hier einfach um ein Nachrichtenfeld erweitern, das du dann auf der JS-Seite ausliest und im HTML darstellest.
 
kkapsner schrieb:
Da hast du doch die Stelle mit dem JSON...
Zum Vergrößern anklicken....

Ach so, dann hab ich dich falsch verstanden: ich dachte "ausgegeben" im Sinne von "dargestellt". ;)
Also dann so?
PHP: 
if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
	echo '{"status":"success", "ausgabe": "'.$meldung.'"}';
	exit();
}
 
$meldung kann doch beliebige Zeichen - v.A. eventuell auch ein ". Deswegen würde ich
Code: 
echo '{"status":"success", "ausgabe": ' . json_encode($meldung) . '}';
machen.

Die Stelle, in der das JSON auf der Clientseite weiterverarbeitet wird, brauchst du natürlich auch, damit du das dann erweitern kannst, um deine Meldung zu präsentieren. Am besten suchst du im JS-Code mal nach "AJAX" oder "xhr" oder "XMLHttpRequest".
 
Danke für den Tipp! Wegen der clientseitigen Ausgabe melde ich mich demnächst zurück.
 
In folgenden zwei Dateien habe ich mehrere Stellen gefunden, an denen die Variablen "xhr", "ajax" bzw. "json" verwendet wurden: Anhang 4153
Kann mir jemand die betreffende Zeile sagen, die für die Ausgabe zuständig ist?
 
Zuletzt bearbeitet:
kkapsner schrieb:
Da ist doch der Haufen Kommentare für die Callbacks. Da steht das doch...
Zum Vergrößern anklicken....

Wo genau muss denn dann da was hin? Ich verzweifle gerade ein bisschen :confusion:

Code: 
            // Callback for the submit event of each file upload:
            // submit: function (e, data) {}, // .bind('fileuploadsubmit', func);

            // Callback for the start of each file upload request:
            // send: function (e, data) {}, // .bind('fileuploadsend', func);

            // Callback for successful uploads:
            // done: function (e, data) {}, // .bind('fileuploaddone', func);

            // Callback for failed (abort or error) uploads:
            // fail: function (e, data) {}, // .bind('fileuploadfail', func);

            // Callback for completed (success, abort or error) requests:
            // always: function (e, data) {}, // .bind('fileuploadalways', func);

            // Callback for upload progress events:
            // progress: function (e, data) {}, // .bind('fileuploadprogress', func);

            // Callback for global upload progress events:
            // progressall: function (e, data) {}, // .bind('fileuploadprogressall', func);

            // Callback for uploads start, equivalent to the global ajaxStart event:
            // start: function (e) {}, // .bind('fileuploadstart', func);

            // Callback for uploads stop, equivalent to the global ajaxStop event:
            // stop: function (e) {}, // .bind('fileuploadstop', func);

            // Callback for change events of the fileInput(s):
            // change: function (e, data) {}, // .bind('fileuploadchange', func);

            // Callback for paste events to the pasteZone(s):
            // paste: function (e, data) {}, // .bind('fileuploadpaste', func);

            // Callback for drop events of the dropZone(s):
            // drop: function (e, data) {}, // .bind('fileuploaddrop', func);

            // Callback for dragover events of the dropZone(s):
            // dragover: function (e) {}, // .bind('fileuploaddragover', func);

            // Callback for the start of each chunk upload request:
            // chunksend: function (e, data) {}, // .bind('fileuploadchunksend', func);

            // Callback for successful chunk uploads:
            // chunkdone: function (e, data) {}, // .bind('fileuploadchunkdone', func);

            // Callback for failed (abort or error) chunk uploads:
            // chunkfail: function (e, data) {}, // .bind('fileuploadchunkfail', func);

            // Callback for completed (success, abort or error) chunk upload requests:
            // chunkalways: function (e, data) {}, // .bind('fileuploadchunkalways', func);
 
An der Stelle musst du nichts einfügen. Du hast doch eine Node, die du mit jQuery zu einem fileupload machst. An dieser musst du auch das Event registrieren.
 
kkapsner schrieb:
An der Stelle musst du nichts einfügen. Du hast doch eine Node, die du mit jQuery zu einem fileupload machst. An dieser musst du auch das Event registrieren.
Zum Vergrößern anklicken....

Tut mir leid, ich steh zurzeit total auf dem Schlauch und blick da gar nichts mehr durch :moody:
Könntest du eine Ausnahme machen und mir genau zeigen, was ich an welcher Stelle einbauen muss?
 
Das kann ich dir leider nicht sagen, da ich den Code, wo du den fileupload initialisierst nicht kenne.

Da müsste irgendwo
Code: 
$("irgendein Selektor").fileupload({/*eventuelle Parameter*/});
stehen - da kannst du direkt dahinter das .bind() packen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben