✔ GDownloadUrl ohne Google

MaxivB · 11. August 2009

Hallo,
ich habe eine Progressbar für meinen Upload gebastelt, ich verwende dafür GDownloadUrl:

Code:

function getProgress(){
				GDownloadUrl("getprogress.php?progress_key=<?php echo($id)?>", 
				function (percent, responseCode) {
					percent = percent.split("|");
					current = percent[0] / 1000000;
					size = percent[1] / 1000000;
					percent = percent[0] / percent[1] * 100;
					document.getElementById("progressinner").style.width = percent + "%";
					document.getElementById("percentbar").innerHTML = Math.round(percent) + "% (" + Math.round(current) + " MB von " + Math.round(size) + " MB)";
					if (percent < 100) {
						setTimeout("getProgress()", 100);
						}
					else {
						document.getElementById("finished").style.display = "block";
						document.getElementById("bar").style.display = "none";
						document.getElementById("form").style.display = "block";
						document.getElementById("progressinner").style.width = "0%";
						document.getElementById("percentbar").innerHTML = "0% (0 MB von 0 MB)";
						}
					});
				}

Jetzt hab ich das mit XmlHttp getestet, aber das funktioniert nicht:

Code:

	var xmlHttp = false;
	try {
		xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
		}
	catch(e) {
		try {
			xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
			}
		catch(e) {
			xmlHttp  = false;
			}
		}
	if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
		xmlHttp = new XMLHttpRequest();
		}

function getProgress() {
var percent = "";
	if (xmlHttp) {
		xmlHttp.open('GET', 'getprogress.php?progress_key=<?php echo($id)?>', true);
		xmlHttp.onreadystatechange = function () {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.responseText != "") {
					percent = xmlHttp.responseText;
						}
					}
				}
			};

	percent=1;
					percent = percent.split("|");
					current = percent[0] / 1000000;
					size = percent[1] / 1000000;
					percent = percent[0] / percent[1] * 100;
					document.getElementById("progressinner").style.width = percent + "%";
					document.getElementById("percentbar").innerHTML = String(Math.round(percent)) + "% (" + Math.round(current) + " MB von " + Math.round(size) + " MB)";
					if (percent < 100) {
						setTimeout("getProgress()", 100);
						}
					else {
						//document.getElementById("finished").style.display = "block";
						//document.getElementById("bar").style.display = "none";
						//document.getElementById("form").style.display = "block";
						//document.getElementById("progressinner").style.width = "0%";
						//document.getElementById("percentbar").innerHTML = "0% (0 MB von 0 MB)";
						}
	}

Was muss ich ändern, damit es funktioniert?

Danke im Voraus.

Sven Mintel · 11. August 2009

Moin,

ich hab das jetzt nicht getestet, weiss also auch nicht, was genau nicht funktioniert.

Auf den 1. Blick hin würde ich aber auf jeden Fall vorschlagen, der abgefragten URL einen Timestamp o.ä. änderliches anzuhängen, damit die Anfrage nicht aus dem Cache bedient wird.

MaxivB · 12. August 2009

Ich habe jetzt immer eine Zahl, die sich beim erneuten aufruf der Funktion um 1 vergrößert angehängt, leider funktioniert das auch nicht:

PHP:

<?php
$id = uniqid("");
?>
<html>
	<head>
		<title>Upload mit ProgressBar</title>
		<script src="http://maps.google.com/maps?file=api&v=2&amp;key=ABQIAAAALZIKzZx4ODQTxcd9ThwMIBR0U-lmQ_4xhAbCbLc7Z_vt3H2mQBT8g963iNUlqaOjrPcIPTNxyjJc2g" type="text/javascript"></script>
		<script type="text/javascript">
			/*function getProgress(){
				GDownloadUrl("getprogress.php?progress_key=<?php echo($id)?>", 
				function (percent, responseCode) {
					percent = percent.split("|");
					current = percent[0] / 1000000;
					size = percent[1] / 1000000;
					percent = percent[0] / percent[1] * 100;
					document.getElementById("progressinner").style.width = percent + "%";
					document.getElementById("percentbar").innerHTML = Math.round(percent) + "% (" + Math.round(current) + " MB von " + Math.round(size) + " MB)";
					if (percent < 100) {
						setTimeout("getProgress()", 100);
						}
					else {
						document.getElementById("finished").style.display = "block";
						document.getElementById("bar").style.display = "none";
						document.getElementById("form").style.display = "block";
						document.getElementById("progressinner").style.width = "0%";
						document.getElementById("percentbar").innerHTML = "0% (0 MB von 0 MB)";
						}
					});
				}*/
var xmlHttp = false;
try {
	xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
	}
catch(e) {
	try {
		xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
		}
	catch(e) {
		xmlHttp  = false;
		}
	}
if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
	xmlHttp = new XMLHttpRequest();
	}
var count = 0;
function getProgress() {
	count ++;
	var percent = "";
	if (xmlHttp) {
		xmlHttp.open("GET", "getprogress.php?progress_key=<?php echo($id)?>&count=" + count, true);
		xmlHttp.onreadystatechange = function () {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.responseText != "") {
					percent = xmlHttp.responseText;
					}
				}
			}
		};
	percent = percent.split("|");
	current = percent[0] / 1000000;
	size = percent[1] / 1000000;
	percent = percent[0] / percent[1] * 100;
	document.getElementById("progressinner").style.width = percent + "%";
	document.getElementById("percentbar").innerHTML = String(Math.round(percent)) + "% (" + Math.round(current) + " MB von " + Math.round(size) + " MB)";
	if (percent < 100) {
		setTimeout("getProgress()", 100);
		}
	else {
		//document.getElementById("finished").style.display = "block";
		//document.getElementById("bar").style.display = "none";
		//document.getElementById("form").style.display = "block";
		//document.getElementById("progressinner").style.width = "0%";
		//document.getElementById("percentbar").innerHTML = "0% (0 MB von 0 MB)";
		}
	}
			function startProgress() {
				document.getElementById("finished").style.display = "none";
				document.getElementById("bar").style.display = "block";
				document.getElementById("form").style.display = "none";
				setTimeout("getProgress()", 500);
				}
		</script>
		<style type="text/css">
			body, table, input, select, textarea, a {
				font-size: 13px;
				font-family: 'Trebuchet MS', Verdana, Arial;
				}
			a:hover {
				color: #FF0000;
				}
		</style>
	</head>
	<body>
		<noscript>
			Bitte JavaScript aktivieren
		</noscript>
		<iframe id="uploadframe" name="uploadframe" src="" style="display: none; width: 0px; height: 0px; border: none;"></iframe>
		<div id="finished" style="display: none;">
			Die Datei wurde erfolgreich Hochgeladen
		</div>
		<div id="bar" style="display: none;">
			<div id="progressouter" style="width: 500px; height: 20px; border: 1px #CCCCCC solid;">
				<div id="progressinner" style="position: relative; height: 20px; background-color: #66FF00; width: 0%; "> </div>
			</div>
			<div style="width: 500px; text-align: center;">
				<span id="percentbar">0% (0 MB von 0 MB)</span>
			</div>
		</div>
		<div id="form" style="display: block;">
			<form enctype="multipart/form-data" id="upload_form" action="target.php" method="post" target="uploadframe">
				<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $id?>" />
				<input type="file" id="file" name="file" />
				<input onclick="startProgress(); return true;" type="submit" value="Hochladen" />
			</form>
		</div>
	</body>
</html>

Meine getprogress.php sieht so aus:

PHP:

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");

if(isset($_GET['progress_key'])) {
	$status = apc_fetch("upload_".$_GET['progress_key']);
	echo $status['current']."|".$status['total'];
	}
?>

Und in der target.php ist ein einfacher PHP-Upload drin...

// Edit: Der scheint wohl nie mit dem Laden fertig zu werden... Wenn ich ein alert("test"); hinter xmlHttp.onreadystatechange = function () { setzte kommt nie ein alert-Fenster... getprogress.php existiert aber!

MaxivB · 12. August 2009

Hey, ich bin selbst drauf gekommen, hab einfach noch ein bischen gegoogelt und hab es hiernach gebaut: http://www.easy-coding.de/wiki/php/upload-fortschritt-mit-php-ajax.html

Jetzt hab ich aber noch eine Frage, wie ich mehrere uploads mit APC mache, wegen dem

HTML:

<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?=$id?>" />

Da müssen ja dann auch mehrere IDs rein!?

Sven Mintel · 13. August 2009

Das wird so nicht laufen mit den mehreren IDs.

apc_fetch() erwartet einen String, genau eine ID, für einen Upload mehrerer Dateien müsste da ein JS-Workaround her mit mehreren Formularen/iFrames/IDs

MaxivB · 13. August 2009

Danke für die Antwort, das hab ich gemacht funktioniert auchprächtig in FireFox aber im IE nicht.... Mein Code ist jetzt sehr lang geworden:

HTML:

	<head>
		<title>Upload</title>
		<!--[if IE]>
			<script type="text/javascript">
				document.write("<div style=\"margin: 0px; padding: 10px; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background-color: #FF0000;\">Internet Explorer wird noch nicht unterst&uuml;tzt</div>");
			</script>
		<![endif]-->
		<script type="text/javascript">
			function getProgress(id) {
				var xmlHttp = false;
				try {
					xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
					}
				catch(e) {
					try {
						xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
						}
					catch(e) {
						xmlHttp  = false;
						}
					}
				if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
					xmlHttp = new XMLHttpRequest();
					}
				var statusXmlHttp = false;
				try {
					statusXmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
					}
				catch(e) {
					try {
						statusXmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
						}
					catch(e) {
						statusXmlHttp  = false;
						}
					}
				if (!statusXmlHttp  && typeof XMLHttpRequest != "undefined") {
					statusXmlHttp = new XMLHttpRequest();
					}
				statusXmlHttp.onreadystatechange = function() {
					if ((statusXmlHttp.readyState == 4) && (statusXmlHttp.status == 200)) { 
						percent = statusXmlHttp.responseText.split("|");
						current = percent[0] / 1000000;
						size = percent[1] / 1000000;
						percent = percent[0] / percent[1] * 100;
						document.getElementById("progressinner" + id).style.width = percent + "%"; // -------------------------------- Zeile 46 --------------------------------
						document.getElementById("percentbar" + id).innerHTML = Math.round(percent) + "% (" + Math.round(current) + " MB von " + Math.round(size) + " MB)";
						if (percent < 100) {
							setTimeout("getProgress(" + id + ")", 100);
							}
						else {
							if (xmlHttp) {
								xmlHttp.open("GET", "./md5.php?" + id, true);
								xmlHttp.onreadystatechange = function () {
									if (xmlHttp.readyState == 4) {
										if (xmlHttp.responseText != "") {
											parts = xmlHttp.responseText.split("|");
											document.getElementById("td3" + id).innerHTML = parts[1] + " (<a href=\"./?" + parts[0] + "\">http://domain.de/upload/?" + parts[0] + "</a>)";
											if (id != uploads - 1) {
												if (document.getElementById("file" + (id + 1))) {
													if (document.getElementById("file" + (id + 1)).value != "") {
														document.getElementById("upload_form" + (id + 1)).submit();
														startProgress(id + 1);
														}
													}
												}
											else {
												document.getElementById("finished").style.display = "block";
												}
											}
										}
									};
								xmlHttp.send(null);
								}
							}
						}
					}
				statusXmlHttp.open("GET", "./getprogress.php?progress_key=4a84820d614ea" + id);
				statusXmlHttp.send(null);
				}
			function startProgress(id) {
				setTimeout("getProgress(" + id + ")", 100);
				}
			var uploads = 0;
			function newSelect(id) {
				filename = document.getElementById("file" + id).value;
				newSelected = document.createElement("div");
				newSelected.id = "selected" + id;
				newSelected.style.margin = "2px";
				newSelected.style.border = "1px #000000 solid";
				newSelected.style.width = "254px";
				newSelected.style.height = "19px";
				newSelected.style.backgroundColor = "#CCCCCC";
				newSelected.innerHTML = filename;
				document.getElementById("selected_container").appendChild(newSelected);
				}
			function newUpload() {
				if (document.getElementById("upload_form" + uploads)) {
					document.getElementById("upload_form" + uploads).style.display = "none";
					}
				uploads ++;
				// Create IFrame
				newIFrame = document.createElement("iframe");
				newIFrame.id = "uploadframe" + uploads;
				newIFrame.name = "uploadframe" + uploads;
				newIFrame.src = "";
				newIFrame.style.display = "none";
				document.getElementById("iframes").appendChild(newIFrame);
				// Create Form
				newForm = document.createElement("form");
				newForm.enctype = "multipart/form-data";
				newForm.id = "upload_form" + uploads;
				newForm.action = "./target.php?id=" + uploads;
				newForm.method = "post";
				newForm.target = "uploadframe" + uploads;
				document.getElementById("form_container").appendChild(newForm);
				// Create Input
				newHidden = document.createElement("input");
				newHidden.type = "hidden";
				newHidden.name = "APC_UPLOAD_PROGRESS";
				newHidden.id = "progress_key" + uploads;
				newHidden.value = "4a84820d614ea" + uploads;
				document.getElementById("upload_form" + uploads).appendChild(newHidden);
				// Create File
				newFile = document.createElement("input");
				newFile.type = "file";
				newFile.id = "file" + uploads;
				newFile.name = "file";
				newFile.onchange = function () {uploadChanged(uploads);};
				document.getElementById("upload_form" + uploads).appendChild(newFile);
				// Create Submit
				newSubmit = document.createElement("input");
				newSubmit.type = "button";
				newSubmit.value = "Hochladen";
				newSubmit.onclick = function () {uploadAll();};
				document.getElementById("upload_form" + uploads).appendChild(newSubmit);
				// Create Reset
				newReset = document.createElement("input");
				newReset.type = "button";
				newReset.value = "Reset";
				newReset.onclick = function () {resetUpload();};
				document.getElementById("upload_form" + uploads).appendChild(newReset);
				}
			function resetUpload() {
				document.getElementById("form_container").innerHTML = "";
				document.getElementById("selected_container").innerHTML = "";
				document.getElementById("iframes").innerHTML = "";
				document.getElementById("bars").innerHTML = "";
				document.getElementById("finished").style.display = "none";
				uploads = 0;
				newUpload();
				}
			function uploadChanged(fileid) {
				newSelect(fileid);
				newUpload();
				}
			function constructBars() {
				for (id = 1; id < uploads; id ++) {
					document.getElementById("form").style.display = "none";
					newBar = document.createElement("div");
					newBar.style.display = "block";
					newBar.id = "bar" + id;
					document.getElementById("bars").appendChild(newBar);
					newTable = document.createElement("table");
					newTable.id = "table" + id;
					newTable.style.border = "none";
					newTable.style.padding = "0px";
					newTable.style.margin = "0px";
					newTable.cellspacing = "0";
					document.getElementById("bar" + id).appendChild(newTable);
					newTr = document.createElement("tr");
					newTr.id = "tr" + id;
					document.getElementById("table" + id).appendChild(newTr);
					newTd = document.createElement("td");
					newTd.id = "td1" + id;
					newTd.style.padding = "2px";
					document.getElementById("tr" + id).appendChild(newTd);
					newProgressOuter = document.createElement("div");
					newProgressOuter.id = "progressouter" + id;
					newProgressOuter.style.width = "150px";
					newProgressOuter.style.height = "12px";
					newProgressOuter.style.border = "1px #CCCCCC solid";
					document.getElementById("td1" + id).appendChild(newProgressOuter);
					newProgressInner = document.createElement("div");
					newProgressInner.id = "progressinner" + id;
					newProgressInner.style.position = "relative";
					newProgressInner.style.height = "12px";
					newProgressInner.style.backgroundColor = "#33CC00";
					newProgressInner.style.width = "0%";
					document.getElementById("progressouter" + id).appendChild(newProgressInner);
					newTd = document.createElement("td");
					newTd.id = "td2" + id;
					newTd.style.padding = "2px";
					document.getElementById("tr" + id).appendChild(newTd);
					newPerCentBar = document.createElement("span");
					newPerCentBar.id = "percentbar" + id;
					newPerCentBar.style.fontSize = "12px";
					newPerCentBar.innerHTML = "0% (0 MB von 0 MB)";
					document.getElementById("td2" + id).appendChild(newPerCentBar);
					newTd = document.createElement("td");
					newTd.id = "td3" + id;
					newTd.style.padding = "2px";
					newTd.innerHTML = document.getElementById("file" + id).value;
					document.getElementById("tr" + id).appendChild(newTd);
					}
				}
			function uploadAll() {
				constructBars();
				if (document.getElementById("upload_form1")) {
					if (document.getElementById("file1").value != "") {
						document.getElementById("upload_form1").submit();
						startProgress(1);
						}
					}
				}
		</script>
		<style type="text/css">
			body, table, input, select, textarea, a {
				font-size: 13px;
				font-family: 'Trebuchet MS', Verdana, Arial;
				}
			a:hover {
				color: #FF0000;
				}
		</style>
	</head>
	<body onload="newUpload();">

		<noscript>
			Bitte JavaScript aktivieren
		</noscript>
		<div id="bars"></div>
		<div id="iframes"></div>
		<div id="form" style="display: block;">
			<div id="form_container"></div>
			<div id="selected_container"></div>
		</div>
		<div id="finished" style="display: none;">Alle Dateien im Zip-Archiv: <a href="./?zip=4a84820d614ea">http://domain.de/upload/?zip=4a84820d614ea</a></div>

	</body>

Der uploadet irgendwie nicht in das IFrame, sondern in ein Popup... Und dann ist in Zeile 46 ein ungültiges Argument!?

Sven Mintel · 14. August 2009

Es scheint, als ignoriert der IE die Zuweisung des name-Attributes an das iframe.

So herum sollte es besser gehen:

Code:

// Create IFrame
				newIFrame = document.createElement('span');
				newIFrame.innerHTML='<iframe style="display:none"  name="uploadframe' + uploads+'" id="uploadframe' + uploads+'"></iframe>';
				newIFrame.id = "uploadframe" + uploads;
				document.getElementById("iframes").appendChild(newIFrame);

Frag mich aber nicht, warum er die Zuweisung ignoriert :-(

MaxivB · 14. August 2009

Perfekt, jetzt soll nurnoch in Zeile 46 ein ungültiges Argument sein:

Code:

[...]
						percent = percent[0] / percent[1] * 100;
						document.getElementById("progressinner" + id).style.width = percent + "%"; // -------------------------------- Zeile 46 --------------------------------
						document.getElementById("percentbar" + id).innerHTML = Math.round(percent) + "% (" + Math.round(current) + " MB von " + Math.round(size) + " MB)";
[...]

// Edit: Ich habe herausgefunden, dass das Form jetzt das IFame als Target benutzt aber nicht wirklich die Datei Hochlädt, die ich ausgewählt habe. Desshab bekommt er vom getprogress.php auch nur das Trennzeichen "|" gesendet.

// Nochmal Edit ^^ : Ich habe jetzt den Form mit innerHTML und die ProgressBars mit innerHTML erstellt und siehe da es Funktioniert auch im IE:

HTML:

<!-- $id in PHP: $id = uniqid(""); -->
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
	<head>
		<title>Upload</title>
		<script type="text/javascript">
			/* <![CDATA[ */
			var count = 0;
			function getProgress(id) {
				var xmlHttp = false;
				try {
					xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
					}
				catch(e) {
					try {
						xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
						}
					catch(e) {
						xmlHttp  = false;
						}
					}
				if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
					xmlHttp = new XMLHttpRequest();
					}
				var statusXmlHttp = false;
				try {
					statusXmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
					}
				catch(e) {
					try {
						statusXmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
						}
					catch(e) {
						statusXmlHttp  = false;
						}
					}
				if (!statusXmlHttp  && typeof XMLHttpRequest != "undefined") {
					statusXmlHttp = new XMLHttpRequest();
					}
				statusXmlHttp.onreadystatechange = function() {
					if ((statusXmlHttp.readyState == 4) && (statusXmlHttp.status == 200)) { 
						percent = statusXmlHttp.responseText.split("|");
						current = percent[0] / 1000000;
						size = percent[1] / 1000000;
						percent = percent[0] / percent[1] * 100;
						document.getElementById("progressinner" + id).style.width = percent + "%";
						document.getElementById("percentbar" + id).innerHTML = Math.round(percent) + "% (" + Math.round(current) + " MB von " + Math.round(size) + " MB)";
						if (percent < 100) {
							setTimeout("getProgress(" + id + ")", 100);
							}
						else {
							if (xmlHttp) {
								xmlHttp.open("GET", "./md5.php?" + id, true);
								xmlHttp.onreadystatechange = function () {
									if (xmlHttp.readyState == 4) {
										if (xmlHttp.responseText != "") {
											parts = xmlHttp.responseText.split("|");
											document.getElementById("filename" + id).innerHTML = parts[1] + " (<a href=\"./?" + parts[0] + "\">http://domain.tld/upload/?" + parts[0] + "</a>)";
											if (id != uploads - 1) {
												if (document.getElementById("file" + (id + 1))) {
													if (document.getElementById("file" + (id + 1)).value != "") {
														document.getElementById("upload_form" + (id + 1)).submit();
														startProgress(id + 1);
														}
													}
												}
											else {
												document.getElementById("finished").style.display = "block";
												}
											}
										}
									};
								xmlHttp.send(null);
								}
							}
						}
					}
				statusXmlHttp.open("GET", "./getprogress.php?progress_key=<?=$id?>" + id + "&" + count);
				statusXmlHttp.send(null);
				count ++;
				}
			function startProgress(id) {
				setTimeout("getProgress(" + id + ")", 100);
				}
			var uploads = 0;
			function newSelect(id) {
				filename = document.getElementById("file" + id).value;
				newSelected = document.createElement("div");
				newSelected.id = "selected" + id;
				newSelected.style.margin = "2px";
				newSelected.style.border = "1px #000000 solid";
				newSelected.style.width = "254px";
				newSelected.style.height = "19px";
				newSelected.style.backgroundColor = "#CCCCCC";
				newSelected.innerHTML = filename;
				document.getElementById("selected_container").appendChild(newSelected);
				}
			function newUpload() {
				if (document.getElementById("upload_form" + uploads)) {
					document.getElementById("upload_form" + uploads).style.display = "none";
					}
				uploads ++;
				// Create IFrame
				newIFrame = document.createElement("span");
				newIFrame.innerHTML = "<iframe name=\"uploadframe" + uploads + "\" id=\"uploadframe" + uploads + "\"></iframe>";
				newIFrame.id = "uploadframe_span" + uploads;
				newIFrame.style.display = "none";
				document.getElementById("iframes").appendChild(newIFrame);
				// Create Form
				newForm = document.createElement("span");
				newForm.id = "upload_form_span" + uploads;
				newForm.innerHTML = "<form action=\"./target.php?id=" + uploads + "\" enctype=\"multipart/form-data\" method=\"post\" target=\"uploadframe" + uploads + "\" id=\"upload_form" + uploads + "\"></form>";
				document.getElementById("form_container").appendChild(newForm);
				// Create Input
				newHidden = document.createElement("input");
				newHidden.type = "hidden";
				newHidden.name = "APC_UPLOAD_PROGRESS";
				newHidden.id = "progress_key" + uploads;
				newHidden.value = "<?=$id?>" + uploads;
				document.getElementById("upload_form" + uploads).appendChild(newHidden);
				// Create File
				newFile = document.createElement("input");
				newFile.type = "file";
				newFile.id = "file" + uploads;
				newFile.name = "file";
				newFile.onchange = function () {uploadChanged(uploads);};
				document.getElementById("upload_form" + uploads).appendChild(newFile);
				// Create Submit
				newSubmit = document.createElement("input");
				newSubmit.type = "button";
				newSubmit.value = "Hochladen";
				newSubmit.onclick = function () {uploadAll();};
				document.getElementById("upload_form" + uploads).appendChild(newSubmit);
				// Create Reset
				newReset = document.createElement("input");
				newReset.type = "button";
				newReset.value = "Reset";
				newReset.onclick = function () {resetUpload();};
				document.getElementById("upload_form" + uploads).appendChild(newReset);
				}
			function resetUpload() {
				document.getElementById("form_container").innerHTML = "";
				document.getElementById("selected_container").innerHTML = "";
				document.getElementById("iframes").innerHTML = "";
				document.getElementById("bars").innerHTML = "";
				document.getElementById("finished").style.display = "none";
				uploads = 0;
				newUpload();
				}
			function uploadChanged(fileid) {
				newSelect(fileid);
				newUpload();
				}
			function constructBars() {
				for (id = 1; id < uploads; id ++) {
					document.getElementById("form").style.display = "none";
					document.getElementById("bars").innerHTML += "<div style=\"display: block;\" id=\"bar" + id + "\"><table style=\"border: none; padding: 0px; margin: 0px;\" cellspacing=\"0\"><tr><td style=\"padding: 2px;\"><div id=\"progressouter" + id + "\" style=\"width: 150px; height: 12px; border: 1px #CCCCCC solid;\"><div id=\"progressinner" + id + "\" style=\"position: relative; background-color: #33CC00; height: 12px; width: 0%;\"></td><td style=\"padding: 2px;\"><span id=\"percentbar" + id + "\" style=\"font-size: 12px;\"></span></td><td id=\"filename" + id + "\" style=\"padding: 2px;\">" + document.getElementById("file" + id).value + "</td></tr></table></div>";
					}
				}
			function uploadAll() {
				constructBars();
				if (document.getElementById("upload_form1")) {
					if (document.getElementById("file1").value != "") {
						document.getElementById("upload_form1").submit();
						startProgress(1);
						}
					}
				}
			/* ]]> */
		</script>
		<style type="text/css">
			body, table, input, select, textarea, a {
				font-size: 13px;
				font-family: 'Trebuchet MS', Verdana, Arial;
				}
			a:hover {
				color: #FF0000;
				}
		</style>
	</head>
	<body onload="newUpload();">

		<noscript>
			Bitte JavaScript aktivieren
		</noscript>
		<div id="bars"></div>
		<div id="iframes"></div>
		<div id="form" style="display: block;">
			<div id="form_container"></div>
			<div id="selected_container"></div>
		</div>
		<div id="finished" style="display: none;">Alle Dateien im Zip-Archiv: <a href="./?zip=<?=$id?>">http://domain.tld/upload/?zip=<?=$id?></a></div>

	</body>
</html>

Danke, danke, danke, Sven Mintel!

Sven Mintel · 14. August 2009

Moin,

Ich hab jetzt den Überblick verloren, funktioniert jetzt alles? :-(

Ich hätte da vielleicht noch eine Idee, die das Ganze etwas übersichtlicher machen könnte.

Du erstellst ja da die ganzen Elemente und holst dann per AJAX die ID vom Server.

Wie wäre es, wenn du per AJAX gleich das komplette Formular inkl. Feld für die ID und iFrame abholst...vielleicht spielt ja der IE da sogar mit, wenn du da gültiges XML abliefern lässt und die Antwort als XML-Dokument verarbeitest

Ist aber nur so eine Idee,

MaxivB · 29. August 2009

Also, der IE spielt jetzt mit, da ich die IFrames über innerHTML in einen SPAN geschrieben habe.

✔ GDownloadUrl ohne Google

MaxivB

Sven Mintel

Mitglied

MaxivB

MaxivB

Sven Mintel

Mitglied

MaxivB

Sven Mintel

Mitglied

MaxivB

Sven Mintel

Mitglied

MaxivB

Neue Beiträge