Hallo alle zusammen,
mal wieder ein neues Problem
Ich möchte mit Ajax einen Bildupload durchführen. Immer nur ein Bild, nicht größer als 6MB. Die Größe frage ich bereits ab, ist das Bild größer als 6MB, wird eine Meldung ausgegeben und der Upload abgebrochen bzw. gar nicht erst gestartet.
Nun zum Upload selbst.
Auf der HTML Seite ist ein ganz normales File Tag.
Der Klick startet die Auswahl, dann eine Javascript Funktion (Ajax), die wiederum ein weiteres PHP Script startet.
diese Funktion wird mit dem Button gestartet:
das ist auszugweise, funktioniert ja auch, das Problem liegt woanders
mit
Das funktioniert auch. Nur die zeitlichen Abläufe sind nicht zufriedenstellend.
Ich sehe das so:
Wenn ich das Javascript starte, wird zuerst
mal wieder ein neues Problem
Ich möchte mit Ajax einen Bildupload durchführen. Immer nur ein Bild, nicht größer als 6MB. Die Größe frage ich bereits ab, ist das Bild größer als 6MB, wird eine Meldung ausgegeben und der Upload abgebrochen bzw. gar nicht erst gestartet.
Nun zum Upload selbst.
Auf der HTML Seite ist ein ganz normales File Tag.
Der Klick startet die Auswahl, dann eine Javascript Funktion (Ajax), die wiederum ein weiteres PHP Script startet.
diese Funktion wird mit dem Button gestartet:
PHP-Code:
var url = document.getElementById(formId).action; //URL, zum php Script, wird aus dem action tag vom Form geholt
var form = document.getElementById(formId); //URL, zum php Script, wird aus dem action tag vom Form geholt
var elem = document.getElementById(formId).elements; //liest alle Form Felder aus (für spätere Verwendung)
var fileFieldName = fileName;
var i = 0;
var fileData;
var params = "";
var data = new FormData(); //DataForm Object initialisieren (erst ab IE 10 verfügbar)
var dataSes = new FormData(); //DataForm Object initialisieren (erst ab IE 10 verfügbar)
var inputCheckSize = document.getElementById(fileID);
//alert(inputCheckSize.files[0].size);
if(inputCheckSize.files[0].size > 7200000){
alert(" Das ausgew" + unescape("%E4") + "hlte Bild ist zu gro" + unescape("%DF") + " - Die maximal zul" + unescape("%E4") + "ssige Gr" + unescape("%F6%DF") + "e ist 6 MB\n the selected image is too big - The maximum size allowed is 6 MB");
closeWait();
return false;
}
//else{alert("size ok");}
fileData = window.document.getElementById(fileID).files[0]; //console.log(fileData);
data.append(fileName, fileData, fileData.name);
data.append("fileFieldName", fileFieldName);
dataSes.append("fileFieldName", fileFieldName);
mlhttp5.arguments = "error_session 1 > " + urlSes;
xmlhttp5.onload = setTimeout(function(){
//alert(urlSes);
//alert(url);
//alert(functionNames);
xmlhttp4.onload = setTimeout("meineFunktionZur Auswertung()", 10000);
xmlhttp4.onerror = xmlhttp4Error;
xmlhttp4.open("POST", url, true); //Form an URL senden
//xmlhttp4.setRequestHeader("Content-type", "multipart/form-data"); //weglassen, sonst Fehler
xmlhttp4.send(data); //Bild-Daten versenden
return false;
}, 1000);
xmlhttp5.onerror = xmlhttp5Error;
xmlhttp5.open("POST", urlSes, true);
xmlhttp5.send(dataSes);
mit
xmlhttp5.send(dataSes);
sende ich Daten zu einem PHP Script, welches diese in die DB einträgt.
xmlhttp4.send(data);
startet ein PHP script welches die Daten des FileObjektes ausliest und dann mit
move_uploaded_file() das Bild auf dem Server speichert.sende ich Daten zu einem PHP Script, welches diese in die DB einträgt.
xmlhttp4.send(data);
startet ein PHP script welches die Daten des FileObjektes ausliest und dann mit
xmlhttp4.onload = setTimeout("meineFunktionZur Auswertung()", 10000);
starte dann das Javascript welches den Respoonse von xmlhttp4.send(data);
verarbeitetDas funktioniert auch. Nur die zeitlichen Abläufe sind nicht zufriedenstellend.
Ich sehe das so:
Wenn ich das Javascript starte, wird zuerst
das Fomular über das Javascript ausgelesen, dann wird xmlhttp5.send(dataSes); ausgeführt. Das sind nur Zahlen in die DB, das geht schnell. Wenn das fertig ist, kommt xmlhttp5.onload zum Einsatz. Jetzt
werden per send() mit dem xmlhttp Request die Daten des Forms übertragen, also der Upload ausgeführt (
xmlhttp4.send(data
)).
Wenn das fertig ist, kommt
Wenn das fertig ist, kommt
xmlhttp4.onload zum Einsatz und speichert das Bild. Aber so läuft es nicht ab. Ich meine, die Reihenfolge scheint schon so zu sein, aber das onlaod scheint nicht wirklich zu wirken.
Das xmlhttp4.onload = setTimeout("meineFunktionZur Auswertung()", 10000); wird schon aufgerufen, da ist das Bild noch nicht mal ansatzweise geladen. Deshalb der Timeout. Damit kann ich zwar bei einer einigermaßen flotten Leitung punkten, aber wenn da einer mit Edge am Arbeiten ist, passen die Zeiten nicht mehr.
Wie bekomme ich denn das so hin, dass die weitere Bearbeitung wirklich erst dann passiert, wenn das Bild echt komplett geladen ist? Dann muss auch der Timeout nicht mehr sein.
Das xmlhttp4.onload = setTimeout("meineFunktionZur Auswertung()", 10000); wird schon aufgerufen, da ist das Bild noch nicht mal ansatzweise geladen. Deshalb der Timeout. Damit kann ich zwar bei einer einigermaßen flotten Leitung punkten, aber wenn da einer mit Edge am Arbeiten ist, passen die Zeiten nicht mehr.
Wie bekomme ich denn das so hin, dass die weitere Bearbeitung wirklich erst dann passiert, wenn das Bild echt komplett geladen ist? Dann muss auch der Timeout nicht mehr sein.
Kommentar