Probleme bei onreadystatechange (XMLHttpRequest)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Probleme bei onreadystatechange (XMLHttpRequest)

    Hi,

    ich habe einen Drag And Drop Upload geschrieben und möchte jetzt in einer selbst erstellten MessageBox anzeigen, welches Bild Fehler frei geuploadet wurde und welches einen fehler verursacht hat.

    Problem an der Sache ist, dass nur das letzte Bild das richtige Icon bekommt. Alle anderen bleiben bei dem Load Circle(gif) beim debuggen habe ich schon gesehen das obwohl die anderen Bilder früher fertig sind, werden die immer überschrieben oder garnicht erst aufgerufen?

    in der response funktion habe ich einen "console.log(liId);" dieser müsste bei 2 Bildern auch 2 mal aufgerufen werden und einmal "image_0" und "image_1" zurück gegben. Leider wird er nur einmal aufgerufen und gibt mir "image_1" zurück (Was auch erklärt warum nur das letzte bild das richtig icon bekommt). Die Frage ist aber, wie kann ich das umgehene? gibs da irgend eine asynchrone möglichkeit?

    Die drop Funktion checkt wieviele elemente geuploadet werden sollen, und ruft so oft wie nötig die upload funktion auf

    Quellcode

    1. drop = function(event) {
    2. //$('.'+place).css('background-image','url(images/ajax-loader.gif)');
    3. if(!MessageBox.Show("upload","Upload","Queue:","ok")) {
    4. alert("Die MessageBox konnte nicht erstellt werden!");
    5. return false;
    6. }
    7. event.preventDefault();
    8. var dt = event.dataTransfer;
    9. var files = dt.files;
    10. for (var i = 0; i<files.length; i++) {
    11. $('#uploadQueue').append('<li id="image_'+i+'">'+files[i].name+'</li>');
    12. var file = files[i];
    13. upload(file, i);
    14. }
    15. }
    Alles anzeigen


    die upload funktion sendet die Daten zu einem php script für den fertigen Upload.

    Quellcode

    1. upload = function(file, id) {
    2. xhr = new XMLHttpRequest();
    3. xhr.open('POST', targetPHP+'?up=true', true);
    4. xhr.setRequestHeader('UP-FILENAME', file.name);
    5. xhr.setRequestHeader('UP-SIZE', file.size);
    6. xhr.setRequestHeader('UP-TYPE', file.type);
    7. xhr.setRequestHeader('UP-ID', id);
    8. xhr.onreadystatechange = response;
    9. xhr.send(file);
    10. }


    onreadystatechange wird jetzt angewiesen die funktion response auf zu rufen wenn daten ankommen:

    Quellcode

    1. function response() {
    2. if((xhr.readyState==4) && (xhr.status==200)) {
    3. responseTxt = xhr.responseText;
    4. responseArray = responseTxt.split(' :|: ',2);
    5. if((responseArray[0] != '') && (responseArray[1] != '')) {
    6. liId = "image_"+responseArray[0];
    7. console.log(liId);
    8. switch(responseArray[1]) {
    9. case "1":
    10. $('#'+liId).css('background-image', 'url(../img/upload_check.png)');
    11. break;
    12. case "2":
    13. $('#'+liId).css('background-image', 'url(../img/upload_alert.png)');
    14. break;
    15. case "3":
    16. $('#'+liId).css('background-image', 'url(../img/upload_error.png)');
    17. break;
    18. case "4":
    19. $('#'+liId).css('background-image', 'url(../img/upload_error.png)');
    20. break;
    21. }
    22. }
    23. }
    24. }
    Alles anzeigen

  • Hi,
    JavaScript arbeitet seeeehr viel mit Scopes. Alles was ein "var" vorneweg hat ist nur im Scope gültig. Alles ohne "var" ist eine globale Variable.

    Wenn du also liId = "image_"+responseArray[0]; überschreibst, dann überschreibst du eine globale Variable.
    Mach mal ein "var lild" draus, dann sollte die Stelle funktionieren.

    Eventuell solltest du noch weitere globale Variablen lokal machen.

    LG

  • Vielen dank schonmal Torben,

    ich hatte sowas auch im kopf gehabt und habe es geändert aber leider hat das nichts geändert :(

    Wie man sieht habe ich da auch einen "console.log(liId)" dirn und das kommt bei firebug als ergebnis:

    Quellcode

    1. POST ***/imageUpload.php?up=true - 200 OK - 1.08s - upload.js (Zeile 26)
    2. POST ***/imageUpload.php?up=true - 200 OK - 1.78s - upload.js (Zeile 26)
    3. 3 - upload.js (Zeile 30)
    4. image_1 - upload.js (Zeile 34)


    Wie man sieht werden 2 Bilder geuploaded (und auch 2 Antworten kommen zurück) leider kommt aber der Console.log erst nach beendigung beider anfragen zum tragen :(

    Hier übrigens mal eine Aktualisiert version von der response funktion:

    Quellcode

    1. function response() {
    2. if((xhr.readyState==4) && (xhr.status==200)) {
    3. console.log(xhr.responseText);
    4. responseTxt = xhr.responseText;
    5. if((responseTxt != '') && (xhr.getResponseHeader("File-Id") != '')) {
    6. liId = "image_"+xhr.getResponseHeader("File-Id");
    7. console.log(liId);
    8. switch(responseTxt) {
    9. //0 = Alles okay
    10. case "0":
    11. $('#'+liId).css('background-image', 'url(../img/upload_check.png)');
    12. break;
    13. //1 = exif konnte nicht in die datenbank geschrieben werden. Image wurde sehr warscheinlich trozdem hochgeladen!
    14. case "1":
    15. $('#'+liId).css('background-image', 'url(../img/upload_alert.png)');
    16. break;
    17. //2 = exif datei war kein array oder exif konnten nicht geladen werden. Image wurde sehr warscheinlich trozdem hochgeladen!
    18. case "2":
    19. $('#'+liId).css('background-image', 'url(../img/upload_alert.png)');
    20. break;
    21. //3 = Die datei exisitert entweder schon oder konnte nicht hochgeladen werden!
    22. case "3":
    23. $('#'+liId).css('background-image', 'url(../img/upload_error.png)');
    24. break;
    25. //4 = einer der parameter die übergeben werden müssen (wie UP-SIZE) ist nicht vorhanden
    26. case "4":
    27. $('#'+liId).css('background-image', 'url(../img/upload_error.png)');
    28. break;
    29. //5 = einer der Ordner wo die dateien (normales bild und thumbnail) rein kommen, sind nicht vorhanden
    30. case "5":
    31. $('#'+liId).css('background-image', 'url(../img/upload_error.png)');
    32. break;
    33. // irgendwas stimmt warscheinlich nicht
    34. default:
    35. $('#'+liId).css('background-image', 'url(../img/upload_alert.png)');
    36. break;
    37. }
    38. }
    39. else {
    40. alert("Fatal Error!");
    41. }
    42. /*if(xhr.responseText == 32) {
    43. alert("Ein Bild mit diesen Namen existiert schon!");
    44. }
    45. else if(xhr.responseText == 1) {
    47. }
    48. else if(xhr.responseText == 2) {
    49. alert("Upload fehlgeschlagen!");
    50. }*/
    51. }
    52. }
    Alles anzeigen