Fileupload: Status anzeigen

Fragen zum Thema HTML, JavaScript, PHP
Benutzeravatar
naums
Beiträge: 740
Registriert: Sa Jan 02, 2010 10:40 pm
Kontaktdaten:

Fileupload: Status anzeigen

Beitrag von naums » So Jan 16, 2011 6:55 pm

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
.globl truth
truth:
mov r0, #42
mov pc, lr

C@mper
Beiträge: 88
Registriert: Mo Nov 15, 2010 3:30 pm

Re: Fileupload: Status anzeigen

Beitrag von C@mper » So Jan 16, 2011 7:14 pm

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

Benutzeravatar
naums
Beiträge: 740
Registriert: Sa Jan 02, 2010 10:40 pm
Kontaktdaten:

Re: Fileupload: Status anzeigen

Beitrag von naums » So Jan 16, 2011 7:28 pm

kannst du mir bitte ein Codebeispiel tun? :D
.globl truth
truth:
mov r0, #42
mov pc, lr

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: Fileupload: Status anzeigen

Beitrag von Xin » So Jan 16, 2011 9:26 pm

naums hat geschrieben: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.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Benutzeravatar
naums
Beiträge: 740
Registriert: Sa Jan 02, 2010 10:40 pm
Kontaktdaten:

Re: Fileupload: Status anzeigen

Beitrag von naums » So Jan 16, 2011 10:03 pm

Ich formuliers mal um: Kann mir wer ein Codebeispiel tun? Notfalls auch gerne ein Tutorial auf proggen.org oder einer dritten Seite ;)
.globl truth
truth:
mov r0, #42
mov pc, lr

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: Fileupload: Status anzeigen

Beitrag von Xin » So Jan 16, 2011 10:47 pm

naums hat geschrieben: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?
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Benutzeravatar
Dubbel
Beiträge: 197
Registriert: So Jul 06, 2008 6:25 pm
Wohnort: Kopenhagen
Kontaktdaten:

Re: Fileupload: Status anzeigen

Beitrag von Dubbel » So Jan 16, 2011 11:11 pm

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

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: Fileupload: Status anzeigen

Beitrag von Xin » Mo Jan 17, 2011 9:46 am

Dubbel hat geschrieben: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.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

C@mper
Beiträge: 88
Registriert: Mo Nov 15, 2010 3:30 pm

Re: Fileupload: Status anzeigen

Beitrag von C@mper » Mo Jan 17, 2011 10:19 am

Xin hat geschrieben: 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? ;)
Dubbel hat geschrieben: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
Zuletzt geändert von Kerli am Mi Jan 19, 2011 11:57 pm, insgesamt 1-mal geändert.
Grund: Debugcode entfernt

Benutzeravatar
Xin
nur zu Besuch hier
Beiträge: 8858
Registriert: Fr Jul 04, 2008 11:10 pm
Wohnort: /home/xin
Kontaktdaten:

Re: Fileupload: Status anzeigen

Beitrag von Xin » Mo Jan 17, 2011 10:42 am

C@mper hat geschrieben:
Xin hat geschrieben: 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.
C@mper hat geschrieben:
Dubbel hat geschrieben: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.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.

Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.

Antworten