Fileupload: Status anzeigen

[naums]

Hallihallöchen,

Ich will meinen DateiUpload-Formularen mehr Pepp geben, indem ich eine Statusanzeige des Uploads einfügen will. Zum Beispiel: Ich klicke auf Hochladen und ein Schriftzug erscheint und zählt die Prozent nach oben, bis 100%, dann verarbeitet der Server die Datei, und ich werde weitergeleitet.

Wie kann ich sowas realisieren?

Vielen Dank im Voraus.

MfG Naums

[C@mper]

Nur mit Ajax möglich. So habe ich bisher immer meine "Ladebalken" implementiert und eine andere Möglichkeit ist mir nicht bekannt.

[naums]

kannst du mir bitte ein Codebeispiel tun?

[Xin]

Ich will meinen DateiUpload-Formularen mehr Pepp geben, indem ich eine Statusanzeige des Uploads einfügen will. Zum Beispiel: Ich klicke auf Hochladen und ein Schriftzug erscheint und zählt die Prozent nach oben, bis 100%, dann verarbeitet der Server die Datei, und ich werde weitergeleitet.

Wie kann ich sowas realisieren?

Du kannst im Prinzip nur regelmäßig ein Skript auf Deinem Server aufrufen, dass Dir mitteilt, wie groß die Datei, die gerade hochgeladen wird, zurzeit ist. Damit wären wir wieder bei AJAX. Mehr Möglichkeiten sehe ich da auch nicht.

[naums]

Ich formuliers mal um: Kann mir wer ein Codebeispiel tun? Notfalls auch gerne ein Tutorial auf proggen.org oder einer dritten Seite

[Xin]

Kann mir wer ein Codebeispiel tun?

Nach der Formulierung kann ich mich gerade eben so zurückhalten, Dir nix zu tun

Ich habe kein Codebeispiel. Dominik ist da diesbezüglich halbwegs fit, vermute ich. Schick ihm doch mal den Link zu dem Thread, vielleicht erweitert er das AJAX-Tutorial entsprechend, sofern Dir die vorhanden Informationen nicht reichen.
Die Seiten wurden damals soweit ich weiß von Dubbel geschrieben. Vielleicht mag er da ja auch Dein Problem aufgreifen?

[Dubbel]

Ich hab sowas bisher noch nicht implementiert, vielleicht hat C@mper schon eine Lösung auf Lager?

[Xin]

Ich hab sowas bisher noch nicht implementiert, vielleicht hat C@mper schon eine Lösung auf Lager?

Keine Ahnung, ob Du Zeit für sowas hast, falls ja, wäre ich an der Erweiterung im Tutorial früher oder später auch interessiert.
In meinem Fall wäre allerdings bestimmt noch 6 Monate Zeit.

[C@mper]

Schick ihm doch mal den Link zu dem Thread, vielleicht erweitert er das AJAX-Tutorial entsprechend, sofern Dir die vorhanden Informationen nicht reichen.

Wie finde ich das ohne über den direkten Link in Deinem Post? In der Doku ist hierzu kein Link zu finden und stecken da noch mehr interessante aber versteckte Artikel?

Ich hab sowas bisher noch nicht implementiert, vielleicht hat C@mper schon eine Lösung auf Lager?

Ich habe da mal ein kleines Beispiel zusammengestellt:

Für einen Upload öffne ich ein kleines zusätzliches Browserfenster. (Nicht notwendig, aber ich fand's immer ganz nett)

Code: Alles auswählen

<input class='button_small' type='button' value='Update' name='' onclick=\"javascript:UpdatePic();\">

Das dazu gehörende JS:

Code: Alles auswählen

		function UpdatePic()
		{
			window.open('fileupload.php', '_blank', 'dependent=no, resizable=no, left=80, width=600, height=20');
		} // UpdateDriverPic()

Das fileupload.php sieht dann so aus:

Code: Alles auswählen

<?php

//---------------------------------------------------------------------------
//- Name	        : 	fileupload.php												-
//- Descript      :	HTML Formular und Filetransfer Routine fuer Dateiupload		-
//- created	:	10.08.2009 - B.												-
//- change	:																-
//---------------------------------------------------------------------------

if (is_uploaded_file($_FILES['file']['tmp_name']))	       // Wurde wirklich eine Datei hochgeladen? 
{
	SaveFile($_FILES, $_POST);				// Alles OK -> File speichern
}
else 
	echo "No File uploaded.";


//---------------------------------------------------------------------------
//-  Funktion/Name   :  SaveFile											-
//-  Description     :  Das empfangene File Verarbeiten						-
//-						i.E. in einem Verzeichnis speichern, DB Infos 		-
//-							speichern etc.									-
//-  Values          :  (array)  $aFileData	- FILE Systemdaten Uploadfile	-
//-						(array)	 $aPostData	- POST Systemdaten				-
//-  Returnvalue     :  keine (void))										-
//-  Author          :  B.													-
//-  Date-Written    :  10.08.2009                                          -
//-  Changes         :   													-
//---------------------------------------------------------------------------

function SaveFile($aFileData, $aPostData)
{
	// Verarbeitung der empfangenen Datei
} // SaveFile()



//---
//- HTML BEREICH
//---
?>
<html>
<head>
	<title>File Upload</title>
	
	<script type=text/javascript>
	<!--

	//<![CDATA[
	function ajax(element, 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)) 
			{ 
				element.innerHTML = req.responseText;					
				sText = new String(req.responseText);

//---
//- Den response Text auswerten (transfer complete) suchen 
//-			dann Schleife beenden und reset / close durchfuehren
//---
				if (sText.indexOf('transfer complete') > -1)
				{
					sleep(2000);
					window.clearInterval(aktiv);
					window.close();
				}

			}
		}
		req.open('GET', 'uploadstatus.php?uid='+uid);
		
		req.send(null);
	} // ajax()
	//]]>


	function CheckFile(element)
 	{
		var sFileName   = document.upload.file.value;
 		check = checkExt(sFileName);
		if (check == true)
		{
			document.getElementById('upload').submit();
			inner = document.getElementById('status');
			aktiv = window.setInterval('ajax(inner, document.getElementById(\'APC_UPLOAD_PROGRESS\').value)', '750');
 			return true;
		}
		else
		{
 			window.close();
			return false;
		}
 	}  // function CheckFile()


 	function checkExt(value)
 	{
 		var exts = "jpg|jpeg|gif";
 		//var exts = ".*"; //Wenn alle Erweiterung akzeptiert werden sollen
 		 	 			
 	    if (value == "")
  		    return true;
 	    var re = new RegExp("^.+\.("+exts+")$","i");
 	    if (!re.test(value))
 	    {
 	        alert("This file extension is not allowed: \n" + value + "\n\nOnly these extensions are allowed: "+exts.replace(/\|/g,',')+" \n\n");
 	        return false;
 	    }
 	    return true;
 	} // checkExt()
 	 			
 	function sleep(ms)
 	{
 		var zeit =(new Date()).getTime();
 		var stoppZeit = zeit + ms;
 		while((new Date()).getTime() < stoppZeit){};
 	} // sleep() 

 	function StopTransfer(element)
 	{
 		window.close();
 	} // StopTransfer()
 	
 	
 	-->
 	
 	</script>
</head> 					
<body>
 	<iframe src="upload.php" name="hidden_upload" id="hidden_upload" style="display:none"></iframe>

	<form id="upload" name="upload" action="fileupload.php" target="hidden_upload"  method="post" enctype="multipart/form-data">
 
		<input type="hidden" name="APC_UPLOAD_PROGRESS" id="APC_UPLOAD_PROGRESS" value="<?php echo uniqid();?>"/>
		<input type='file' style='width: 400px' name='file' id='file' accept='text/*'>
		<input type='button' value='upload' onClick='this.disabled=true; CheckFile(this);'>
		<input type='button' value='close / stop' onClick='StopTransfer(this);'>

	<div id="status"></div>
	</div>
	</form>
</body>
</html>

Die JS Funktion sleep(), die ich hier mit 2 Sek. aufrufe, ist nur vorhanden, damit man den Ladebalken auch mal mit einer 100% Anzeige zu sehen bekommt. Ansonsten verschwindet das Fenster so schnell, dass man den Ladebalken nie komplett sieht (ist doch schade drum. )

Die uploadstatus.php sieht dann so aus:

Code: Alles auswählen

<?php

//---------------------------------------------------------------------------
//- Name	: 	uploadstatus.php											-
//- Descript:	Erzeugt ueber AJAX eine Timergesteuerte APC Abfrage im 		-
//-				Background zur Ermittlung der uebertragenen Bytes, 			-
//-				waehrend des uploads.										-
//-				Das Ergebnis dieser Informationsabfrage wird zur Anzeige	-
//-				eines Fortschrittsbalkens benötigt.							-
//-				Am Ende des Transfers wird ein Flag uebertragen, wodurch	-
//-				der Timer beendet wird und eine Aktualisierung (refresh)	-
//-				der Upload Seite erzeugt wird.								-
//- created:	10.08.2009 - B.												-
//- change:																	-
//---------------------------------------------------------------------------

$arr = apc_fetch("upload_{$_GET['uid']}");

if (empty($arr))
	echo "";
else
{
	$nPro = sprintf("%2d", abs(round(101) / $arr['total'] * $arr['current']));

	echo "
		<div id='ladebalken' style='position:relative; width:100px; background-color: #C0C0C0;'>
			<span style='position: absolute; width: 100%; z-index: 3; text-align: center;'>". $nPro ."%</span> 
			<div style='position: relative; width: ". $nPro ."%; background-color: #00FF00; color: #00FF00;z-index:2;'>.</div>
		</div>
	";

//---
//- Am Ende des Transfer diesen String senden um timer zu beenden und refresh der Uploadseite zu erzeugen
//---
	if ($nPro > 100)
		echo "transfer complete";
	
}
	
?>

Ich habe das obige Beispiel hier bei mir grad mal getestet und es läuft einwandfrei.

Achsoja.... Damit APC funktioniert, ist eine kleine Änderung in der php.ini notwendig, wenn nicht eh schon vorhanden.

Bei mir musste ich folgende Änderungen durchführen.

Code: Alles auswählen

extension=php_apc.dll  (Kommentar ';' entfernen)

[APC]
;zend_extension = ""
apc.mode = on
apc.mode = shm
apc.enabled=1
apc.shm_segments=2
apc.shm_size=30
apc.ttl=7200
apc.user_ttl=7200
apc.num_files_hint=1024
apc.mmap_file_mask=/tmp/apc.XXXXXX
apc.max_file_size = 200M
apc.post_max_size = 200M
apc.upload_max_filesize = 200M
apc.enable_cli=0
apc.rfc1867=1

Ein sehr gute Erklärung zu APC ist hier zu finden APC

[Xin]

Schick ihm doch mal den Link zu dem Thread, vielleicht erweitert er das AJAX-Tutorial entsprechend, sofern Dir die vorhanden Informationen nicht reichen.

Wie finde ich das ohne über den direkten Link in Deinem Post? In der Doku ist hierzu kein Link zu finden und stecken da noch mehr interessante aber versteckte Artikel?

Entweder muss man wissen, wo sie sind, was ich als Admin so gerade noch überblicke oder man schaut auf den Link 'Übersicht' unten, dort sind alle Seiten aufgeführt.

Der Ajax-Artikel ist noch nicht sauber strukturiert, dass er über die Frontseite erreichbar ist. Wenn er denn mal soweit ist, kann man daraus zusammen mit PHP daraus vielleicht eine ähnliche Startseite wie bei der GUI generieren, wo es speziell um Webprogrammierung geht.
Da könnte sich in diesem Jahr einiges ansammeln, was eine Web-Startseite rechtfertigt.

Ich hab sowas bisher noch nicht implementiert, vielleicht hat C@mper schon eine Lösung auf Lager?

Ich habe da mal ein kleines Beispiel zusammengestellt:

Genauso beginnen Tutorials ^^
Die Antwort ist so ausführlich, dass sie eigentlich als Mini-Tutorial ins Wiki gehört und dann hier einfach nur noch verlinkt wird. Den Forumseintrag findet man nämlich leider nach einem Jahr vermutlich nicht mehr wieder.