# Ajax Upload



## turnx (22. September 2009)

Hallo Community,

mus noch mal euere hilfe in anspruch nehmen, hab extra Ajax gelernt um einen Ajax Upload zu machen, kann zwar jetzt Ajax aber immer noch keinen Upload bauen 
Hier mal ein Beispiel:
http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm
Der linke gefällt mir ganz gut wie haben die das gemacht ? 

gruß.turnx


----------



## Maik (22. September 2009)

turnx hat gesagt.:


> Der linke gefällt mir ganz gut wie haben die das gemacht ?


Der frei zugängliche Quellcode der Seite beantwortet doch diese Frage.

mfg Maik


----------



## turnx (22. September 2009)

Ja schon, aber in dem Code steckt auch vieles was ich gar nicht gebrauchen kann, und ich mus wissen wie das PHP Script die übergebenen Daten verarbeitet usw. sind 1000sende fragen offen die mit dem reihnen Code noch nicht beantwortet sind


----------



## Maik (22. September 2009)

Dann solltest du dir vielleicht die Grundlagen aneignen, wenn deine Fragen mit dem Code nicht beantwortet werden.

mfg Maik


----------



## turnx (22. September 2009)

Bin ja grade dabei bekomm nur keine Produktive Antwort auf meine Frage


----------



## Maik (22. September 2009)

http://valums.com/ajax-upload/ bietet doch eine Anleitung.

mfg Maik


----------



## turnx (22. September 2009)

kann kein english :-( ....


----------



## Maik (22. September 2009)

Ist dir schon mal ein Online-Übersetzer in den Sinn gekommen, der mitunter auch eine komplette Seite übersetzt?

mfg Maik


----------



## turnx (22. September 2009)

Die Grammatik ist fürn ar*** , ich kann mit Ajax schon Daten an ein PHP Script senden und auch Daten abfragen, brauche nur noch ein paar Namen wie ich das mit den Upload schaffen kann


----------



## Maik (22. September 2009)

turnx hat gesagt.:


> Die Grammatik ist fürn ar***


Klares Statement von jemandem, der die englische Sprache nicht beherrscht.



turnx hat gesagt.:


> ich kann mit Ajax schon Daten an ein PHP Script senden und auch Daten abfragen, brauche nur noch ein paar Namen wie ich das mit den Upload schaffen kann


Was für Namen? Und wo hängt es denn überhaupt beim Upload?

mfg Maik


----------



## turnx (22. September 2009)

okay die erste frage wäre: Wie bekomm ich die Upload Box von Windows zu sehen, wenn ich einen Button drück.

Dann wie schick ich die ausgewählte Datei an mein PHP Script, genau weiß ich es selber nicht, mus nur das Grundprinzip verstehen dann versteh ich auch den rest


----------



## Maik (22. September 2009)

Vielleicht solltest du erstmal schauen, wie ein Upload grundsätzlich (ohne AJAX) funktioniert: Felder für Datei-Upload definieren

Im action-Attribut des <form>-Tags  gibst du dein PHP-Script als Adressat an.

In deiner eingangs verlinkten Demo-Seite wird das Formular mit dem <input type="file">-Element durch jQuery erzeugt.

mfg Maik


----------



## turnx (22. September 2009)

Habe mir alles durchgelesen, dort steht nur das was ich selber schon wuste, oder siehst du da eine möglichkeit einen eigenen Button zu erstellen ? 
Edit:
jQuery ? ist das nicht eine Javascript Klasse ?


----------



## Maik (22. September 2009)

Wenn du das alles schon gelesen hast, warum weißt du dann nicht, wie die Daten zu deinem PHP-Script gelangen?

Wenn dir die Zusammenhänge soweit auch klar sind, sollte eigentlich die Analyse des HTML- und JS-Codes deiner eingangs genannten Seite die Frage beantworten, wie der linke Upload-Button (*#button1*, example 1 = Beispiel 1) umgesetzt wurde, und die Daten zum PHP-Script gelangen:

```
/* example 1 */
	var button = $('#button1'), interval;
	new AjaxUpload(button,{
		//action: 'upload-test.php', // Ist aus Sicherheitsgründen vom Autor in diesem Beispiel deaktiviert
		action: 'upload.htm', 
		name: 'myfile',
		onSubmit : function(file, ext){
			// change button text, when user selects file			
			button.text('Uploading');
			
			// If you want to allow uploading only 1 file at time,
			// you can disable upload button
			this.disable();
			
			// Uploding -> Uploading. -> Uploading...
			interval = window.setInterval(function(){
				var text = button.text();
				if (text.length < 13){
					button.text(text + '.');					
				} else {
					button.text('Uploading');				
				}
			}, 200);
		},
		onComplete: function(file, response){
			button.text('Upload');
						
			window.clearInterval(interval);
						
			// enable upload button
			this.enable();
			
			// add file to the list
			$('<li></li>').appendTo('#example1 .files').text(file);						
		}
	});
```


```
<div id="button1" class="button">Upload</div>
```


mfg Maik


----------



## turnx (22. September 2009)

Okay glaube so langsam verstehe ich den Code  war mir einfach zu viel als ich auf Download geklickt hab und da ein ganzes Fussball Feld mit Code kam 

Danke Maik für deine hilfe werde mir mal den Code jetzt in ruhe anschauen


----------



## Maik (22. September 2009)

In dem Script "ajaxupload.3.5.js" brauchst du eigentlich keine Hand anlegen, es sei denn, du willst es auf ein anderes HTML-Element, wie das <div>,   anwenden:


```
/**
 * Creates and returns element from html chunk
 */
var toElement = function(){
        var div = d.createElement('div');
        return function(html){
                div.innerHTML = html;
                var el = div.childNodes[0];
                div.removeChild(el);
                return el;
        }
}();
```

mfg Maik


----------



## turnx (22. September 2009)

Wollte schon gerne Hand anlegen, will das erstmal komplett lernen, und dann ohne anleitung selber coden, will später die ganze Seite in Ajax haben 

Aber gut dann weiß ich jetzt schon mal wo der Code für den Div ist 
ich versuchs mal grade nach zu bauen sag dir gleich bescheid ob es geklappt hat


----------



## turnx (23. September 2009)

Das Beispiel greift auf das jquary framework zurück das will ich aber nicht haben, brauche also doch noch hilfe.

könnte mir das ganze beispiel mal jemand schritt für schritt erklären ? (ohne jquery)

gruß.turnx


----------



## Maik (23. September 2009)

turnx hat gesagt.:


> Das Beispiel greift auf das jquary framework zurück das will ich aber nicht haben


Mit dem jQuery-Beispiel bist du hier gestern Morgen aufgeschlagen. Und heute Abend fällt dir ein, dass du dieses Framework überhaupt nicht nutzen willst :suspekt:

mfg Maik


----------



## DeluXe (23. September 2009)

[ot]
Ich weiss nicht wieso, aber aus irgendeinem Grund muss ich gerade an Swen Uwe denken. 
[/ot]


----------



## Maik (23. September 2009)

- Klappe, die Zweite

Danke, DeluXe! Du sprichst mir aus der Seele 

mfg Maik


----------



## Sven Mintel (23. September 2009)

turnx hat gesagt.:


> Das Beispiel greift auf das jquary framework zurück das will ich aber nicht haben, brauche also doch noch hilfe.
> 
> könnte mir das ganze beispiel mal jemand schritt für schritt erklären ? (ohne jquery)
> 
> gruß.turnx



Jo, mach ich glatt, hab mir dies Skript grad mal durchgelesen.

Eins gleich vorraus: Dies Skript hat mit AJAX genausoviel zu Tun wie mit Mr. Proper 

AJAX ist das austauschen von (XML-)Daten per XMLHTTPRequest...das passiert dort garnicht. Das was dort gemacht wird, hat eher etwas mit diesem schändlich missachtetem Tutorial zu Tun :-(

Also der Reihe nach:
*Wie wird der eigene Button erstellt?*
selbst, wenn du denkst, du klickst auf einen eigenen Button, dem ist nicht so.
Du Klickst auf einen normalen Button eines normalen File-Inputs. Dieses wurde jedoch vollständig transparent gemacht, und dahinter ist der eigene Button platziert...der Klick erfolgt aber auf den unsichtbaren File-Button.
Beim Senden des Formulares wird ein iFrame unsichtbar im Dokument erzeugt und das Zielfenster des Formulares umadressiert in dieses iFrame
Der Upload erfolgt in das unsichtbare iFrame
sobald der onload-Event im iFrame feuert, wird das dort vohandene Dokument ausgelesen und der Dateiname des Uploads ins Elternfenster eingetragen
zu guter Letzt wird das erzeugte iFrame noch aus dem Dokument entfernt...fertsch

alles in allem sollte man dies alles mit 10 Zeilen Code erledigen können.


----------



## turnx (23. September 2009)

wow 20 unproduktive Nachrichten und dann kommt eine richtige, frag ab sofort nur noch nach deinen Antworten 

Zum Topic:

ufff ist das den so die einzigste möglichkeit, die mir bleibt?

Was ich vor habe:
In meinen Tutorial Editor, soll ein Upload möglich sein der User drückt "Upload" und nach fertigen laden, kommt das Bild in kleiner Form in eine Liste jedes neue Bild kommt nach oben, klickt der User auf ein Bild wird es wie ein Smily in den Textbereich geladen 
Neu laden ist somit sehr nervig


----------



## Sven Mintel (23. September 2009)

turnx hat gesagt.:


> wow 20 unproduktive Nachrichten und dann kommt eine richtige


An der mangelnden Produktivität warst du selbst sehr rege beteiligt.
Es ist etwas kompliziert, einen Faden aufzunehmen, wenn  ein wirres Knäuel vor einem liegt.
Ich habe dies Thema hier von Beginn an verfolgt, aber erst nach ca. 36h eine wirklich konkrete Fragestellung entdecken können, auf welche man konkret antworten kann 



turnx hat gesagt.:


> ufff ist das den so die einzigste möglichkeit, die mir bleibt?
> 
> Was ich vor habe:
> In meinen Tutorial Editor, soll ein Upload möglich sein der User drückt "Upload" und nach fertigen laden, kommt das Bild in kleiner Form in eine Liste jedes neue Bild kommt nach oben, klickt der User auf ein Bild wird es wie ein Smily in den Textbereich geladen
> Neu laden ist somit sehr nervig



Eine grundlegend andere Möglichkeit wüsste ich nicht, aber es ist wirklich nicht sonderlich umfangreich, soetwas umzusetzen.
Im Grunde ist es ja ein ganz normaler Upload, mit ein paar Gimmicks aufpoliert.


----------



## turnx (23. September 2009)

wenn ich jetzt zb. nach Ajax-Upload google findet google zwar was aber alles sehr komplex, da du aber sagst es ist nicht wirklich ajax wo nach kann ich dann googlen um das ganze besser zu verstehen, mir ist nur wichtig das ich nach fertigstellung des Script alles zu 100% versteh


----------



## Markus Kolletzky (23. September 2009)

Ich finde es nebenbei gesagt übrigens sehr frech von dir, die fundierten und vor allem geduldigen
Antworten von Maik als "unproduktive Nachrichten" abzuheften. In diesem Sinne spreche ich dir
hiermit eine erste mündliche Verwarnung aus.


----------



## Maik (24. September 2009)

turnx hat gesagt.:


> wow 20 unproduktive Nachrichten und dann kommt eine richtige, frag ab sofort nur noch nach deinen Antworten


 Gratulation! Mit diesem herabwürdigen Beitrag als Dank für meine Unterstützung hast du jetzt doch glatt den Sprung in meine Ignorierliste geschafft, damit ich zukünftig im Forum vor dir verschont bleibe, und meine kostbare Zeit von dir hier nicht mehr verschwendet werden kann 

Und als Gratis-Bonbon entziehe ich dir hiermit nun für die kommenden Tage die Rechte, an unserem Forenleben aktiv teilzunehmen, damit du in der "Auszeit" Gelegenheit findest, in aller Ruhe deine Einstellung zu überdenken, wie du in unserer Community auftrittst, und dich den Mitgliedern gegenüber verhälst!

mfg Maik


----------

