Upload im Hintergrund

B

BillaBong

Erfahrenes Mitglied
Hallo,

Ich habe schon gegoogelt, die Sufu benutzt habe auch schon einiges zu dem Thema gefunden aber nichts was mir weitergeholfen hätte. Und zwar möchte ich das wenn ich ein FileUpload mache die Seite nicht durch das Laden blockiert ist und irgendwie im Hintergrund ausgeführt wird. Ich habe jetzt gelesen das man das an ein Iframe schicken kann mit target das habe ich mal wie folgt probiert.

<form method="post" enctype="multipart/form-data" target="testframe">

<input type="file" name="datei"><br>
<input type="submit" value="Hochladen">
</form>

<iframe name="testframe"></iframe>
Zum Vergrößern anklicken....

jedoch ohne erfolg. Die Seite ist immer noch Solange die Datei hochlädt blockiert. Bin um jede Hilfe dankbar

Gruß
 
Ajax hilft dir da nicht weiter.
Deine Idee mit dem IFrame ist garnicht mal verkehrt. Du musst lediglich noch ein action-Attribut definieren, um festzulegen, welches Script im IFrame den upload handled.

Du solltest aber nicht vergessen, dem User anzuzeigen, dass der Upload gerade durchgeführt wird. Bspw. einen Spinner o.ä. sichtbar machen. Dafür brauchst du Javascript.
Du kannst dir wie in folgendem Beispiel 2 javascript-Funktionen definieren:

startUpload(): macht spinner sichtbar
stopUpload(): macht spinner unsichtbar

upload.php: führt den upload im IFrame durch und ruft stopUpload() nach dem Upload auf.
HTML: 
<form method="post" enctype="multipart/form-data" target="uploadFrame" action="upload.php">

<input type="file" name="datei"><br>
<input type="submit" value="Hochladen" onClick="startUpload()">
</form>

<iframe name="uploadFrame"></iframe>

upload.php
HTML: 
<!-- upload -->

<script type="text/javascript">window.top.window.stopUpload();</script>

Wenn du bspw. ein Bild hochladen willst und dieses direkt anzeigen möchtest, kannst du den Dateinamen und andere Daten natürlich an die javascript-Funktion stopUpload übergeben, die diese dann verarbeitet.

Ich habs jetzt mal nicht getestet, sollte aber klappen. Viel Erfolg.
 
Zuletzt bearbeitet:
Hi,

sorry das ich so lange nicht mehr auf den Thred geantwortet habe, das Problem ist aber immer noch akktuell.

@Julian Maicher: Das action hatte ich am anfang auch drin beim rumprobieren ist hatte ich das aber mal rausgenommen.

Du solltest aber nicht vergessen, dem User anzuzeigen, dass der Upload gerade durchgeführt wird. Bspw. einen Spinner o.ä. sichtbar machen. Dafür brauchst du Javascript.
Zum Vergrößern anklicken....

den ganzen Aufwand betreibe ich ja nur um ein Upload mit Statusanzeige zu basteln.

ich habe jetzt mal ein Beispiel gefunden wie man sowas mit APC extension baut. Das funtzt bei mir aber hinten und vorne nicht. Wenn ich was hochlade Läd die Seite ewig wie halt bei einem Upload ohne Anzeige und kurz vor Schluss gibt er dann die Anzeige aus. Hier mal der code

index.php

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
<head>
	<title>APC Upload</title>
	<script type="text/javascript">
	//<![CDATA[
	function ajax(uid) {
		var req;
	 	try {
			req = window.XMLHttpRequest?new XMLHttpRequest():
				new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
			//Kein AJAX Support
		}

		req.onreadystatechange = function() {
			if ((req.readyState == 4) && (req.status == 200)) {
				document.getElementById("status").innerHTML = req.responseText;
			}
		}
		req.open('GET', 'status.php?uid='+uid);
		alert("1");
		req.send(null);
	}
	//]]>
	</script>
</head>

<body>
	<iframe src="upload.php" name="hidden_upload" style="display:none"></iframe>
	<div id="status"></div>

	<form action="upload.php" target="hidden_upload" method="post" enctype="multipart/form-data">
	<div>
		<input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo uniqid();?>"/>
		<input type="file" name="upload" />
		<input type="submit" onclick="this.disabled=true; setTimeout('ajax(\''+this.form.APC_UPLOAD_PROGRESS.value+'\')', ); "/>
	</div>
	</form>
</body>
</html>


status.php

PHP: 
<?php
$arr = apc_fetch("upload_{$_GET['uid']}");
printf("<pre>%s</pre>", print_r($arr,true));
?>


upload.php

PHP: 
<?php
if(isset($_FILES['upload'])) {
	echo "File upload successfull";
	move_uploaded_file($_FILES['upload']['tmp_name'], "./upload/".$_FILES['upload']['name']);
}
?>

ich hatte mir das so vorgestellt das wenn ich den upload an den iframe sende kann ich auf der Seite zusätlich noch was ausgeben lassen. aber die ist während des kompletten Uploads immer noch am Laden und ich kann nichts ausgeben lassen.
 
Also das Problem, das ich sehe ist, dass das target Attribut nur den Frame angibt, in dem die Ergebnisseite (action-Attribut) angezeigt wird. Bis diese aber fertig geladen ist, muss die Datei erstmal hochgeladen werden. Und dieser Vorgang blockiert die ganze Page.

Generell kannst du mit AJAX keinen Statusbalken realisieren. Du kannst also nicht anzeigen, WIEVIEL der Datei schon hochgeladen wurde. Was du aber machen kannst, ist, den Uplaod selbst in einen IFrame zu legen, einen Spinner (gif-Image) anzuzeigen und damit den Rest der Seite für Interaktionen frei zu halten.*

Ich habe das ganze auch mal für meine Homepage gemacht. Das Script ist sehr umfangreich geworden und ich blicke teilweise selber nicht mehr durch, was jetzt für dich relevant ist, letztendlich läuft es aber auf Folgendes hinaus:

index.php:
HTML: 
<html>
<body>
    Rest der Seite
    <iframe src="upload.php" />
    Rest der Seite
</body>
</html>
upload.php:
PHP: 
<?php
if(isset($_FILES['upload'])) {
    move_uploaded_file($_FILES['upload']['tmp_name'], "./upload/".$_FILES['upload']['name']);
}
?>
<html>
<body>
<form method="post" enctype="multipart/form-data">
    <input type="file" name="upload" />
    <input type="submit" />
</form>
</body>
</html>

Um den Spinner anzuzeigen müsstest du noch ein onClick-Attribut für den submit-Button einfügen, das ein JavaScript aufruft. Dieses JavaScript disabled dann am besten erst den submit-Button und fügt per DOM eine Grafik hinter dem Button ein.

Ich habe bei mir auch neben dem Spinner zusätzlich die index.php verändert. Dort könntest du einen weiteren IFrame einfügen, der wieder eine Upload-Möglichkeit bietet. Während also der erste Upload im erstem IFrame läuft, könnte der User einen zweiten Upload über den per JavaScript eingefügten IFrame anstoßen.
Screenshot

Ich hoffe das hilft als Ansatz ;)
DJ

[edit] * Was natürlich nicht heißt, dass der User auf Links klicken darf oder Ähnliches. Gucken erlaubt. AJAX-Requests erlaubt. Aber durch einen Klick auf einen Link geht natülich der IFrame verloren und damit wird der Upload abgebrochen.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück