Ankündigung

Einklappen
Keine Ankündigung bisher.

Bilder upload

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bilder upload

    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:

    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 
    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(fileNamefileDatafileData.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"urltrue);                                                                           //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"urlSestrue);
        
    xmlhttp5.send(dataSes); 
    das ist auszugweise, funktioniert ja auch, das Problem liegt woanders

    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.


    xmlhttp4.onload = setTimeout("meineFunktionZur Auswertung()", 10000);
    starte dann das Javascript welches den Respoonse von
    xmlhttp4.send(data);
    verarbeitet


    Das 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
    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.


  • #2
    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.
    Kann es ja auch nicht, weil es keine Funktion übergeben bekommt. Und setTimeout() hat bei asynchroner Verarbeitung nun mal nichts zu suchen. Dafür gibt es callbacks und Promises (letzteres bei der Verwendung der Fetch API).

    Kommentar


    • #3
      OK, und kannst Du das auch etwas ausführlicher erklären? Ich übergeben doch eine Funktion?
      PHP-Code:
       xmlhttp5.onload setTimeout(function(){ 
      startet doch eine Funktion, oder nicht? Und dann
      PHP-Code:
        xmlhttp4.onload=setTimeout
      doch auch wieder?
      onload ist doch dazu da, einen Event auszuführen, wenn eben das Script jetzt durch ist, also auch der Response da ist, oder zu was sonst?
      Meinst Du, ich muss in der Funktion, die onload startet noch xmlhttp.readyState abfragen?

      Kommentar


      • #4
        Nummerierte Variablen sind Käse. Benennen Variablen so, dass man versteht, was sie enthalten. Desweiteren gibts im Netz unzählige Beispiele, wie ein Upload funktioniert. Warum siehst du dir diese nicht an?

        https://wiki.selfhtml.org/wiki/JavaScript/File_Upload

        Kommentar


        • #5
          Ich übergeben doch eine Funktion?
          Du übergibst eine ID: https://developer.mozilla.org/de/doc...ers/setTimeout

          startet doch eine Funktion, oder nicht?
          starten != übergeben

          Kommentar


          • #6
            OK, habe ich verstanden. Aber was macht denn dann onload? Wenn ich bei einer HTML Seite im Body Tag onload einbringe, dann feuert der Event wenn die Seite komplett geladen ist. Genauso habe ich das halt hier auch gesehen. Onload sollte doch frühestens dann den Event auslösen, wenn alle Daten, die ich per send() absende, auch wirklich komplett gesendet wurden? Ich habe das jetzt in ein
            xmlhttp.readyState gepackt und es funktioniert so wie es soll. Erst mal danke für den Hinweis. Trotzdem grüble ich noch, wozu gibt es dann onload?

            Kommentar


            • #7
              Zitat von hellbringer Beitrag anzeigen
              Nummerierte Variablen sind Käse. Benennen Variablen so, dass man versteht, was sie enthalten. Desweiteren gibts im Netz unzählige Beispiele, wie ein Upload funktioniert. Warum siehst du dir diese nicht an?

              https://wiki.selfhtml.org/wiki/JavaScript/File_Upload
              Ich danke Dir auch für Deine Hinweise. Das neuen FileUploadObjekt habe ich so noch gar nicht auf dem Schirm gehabt. Für die einfache "altgewohnte" Art, eine Datei per FileUpload zu laden, habe ich darüber gar nicht nachgedacht. Trotzdem steht die Frage im Raum, warum onload eben nicht bei "fertig" feuert sondern früher. Was nun meine Variablen anbelangt, so ist
              xmlhttp4
              eben der Request Nummer 4. Ich lege die am Anfang fest. Nummeriert von 1 - 6 und nutze diese dann. Ich wollte einfach nicht mit jedem Aufruf einen neuen Request aufmachen. Aber das ist schon wieder eine andere Baustelle. Ich meine, Adresse1, Adresse2, Adresse3 und so weiter sind auch Zählvariablen aber doch trotzdem eindeutig. Ich wüsste jetzt nicht, was daran nun schon wieder falsch sein sollte.

              Kommentar


              • #8
                Wenn ich bei einer HTML Seite im Body Tag onload einbringe, dann feuert der Event wenn die Seite komplett geladen ist. Genauso habe ich das halt hier auch gesehen.
                Der Event wird auch gefeuert. Nur wenn es keinen Event-Listener dazu gibt, passiert halt nichts.

                Kommentar


                • #9
                  Zitat von psygonis Beitrag anzeigen
                  Trotzdem steht die Frage im Raum, warum onload eben nicht bei "fertig" feuert sondern früher.
                  Onload feuert nicht zu früh, sondern DU feuerst zu früh. Dass setTimeout falsch ist wurde doch schon genannt.

                  Zitat von psygonis Beitrag anzeigen
                  Was nun meine Variablen anbelangt, so ist
                  xmlhttp4
                  eben der Request Nummer 4. Ich lege die am Anfang fest. Nummeriert von 1 - 6 und nutze diese dann.
                  Und sowas ist halt hochgradiger Käse weil nicht verständich.

                  Auf eine Speisekarte stehen ja auch die Namen der Gerichte und nicht "Gericht 1", "Gericht 2", "Gericht 3", usw.

                  Zitat von psygonis Beitrag anzeigen
                  Ich wollte einfach nicht mit jedem Aufruf einen neuen Request aufmachen. Aber das ist schon wieder eine andere Baustelle. Ich meine, Adresse1, Adresse2, Adresse3 und so weiter sind auch Zählvariablen aber doch trotzdem eindeutig. Ich wüsste jetzt nicht, was daran nun schon wieder falsch sein sollte.
                  Das ist kompletter Müll. Verwende sinnvolle Namen wie Privatadresse, Geschäftsadresse, Lieferadress und NICHT Adresse 1, Adresse 2, Adresse 3.

                  Kommentar


                  • #10
                    hellbringer
                    Mann Junge, ich geb mir doch nun wirklich Mühe. Aber was hat jetzt das Eine mit dem Anderen zu tun? Ich kann ja nachvollziehen, das Du die Variablen gerne anders benennen möchtest. Aber das hat doch keinen Einfluss auf die Funktionalität. Und für mich sind die halt eindeutig. Nun zu dem Timeout. Der Timeout setzt eine Verzögerung.. Wenn ich den weglasse, wird die Funktion darin viel zu früh ausgeführt. Dann erkläre mir doch mal warum. Warum feuert onload sofort und nicht erst, wenn das Script fertig ist? Was ist dann der sinn von onload? Da sind wir sogar wieder bei Deiner Aussage, sinnvolle Namen. Bei mir heißt onload, fertig geladen. Bei JS anscheinend nicht. Ich möchte doch nur wissen, wieso.

                    Kommentar


                    • #11
                      Ich möchte doch nur wissen, wieso.
                      Weil du keine Event-Handler definiert hast.

                      Und setTimeout() ist kein Event-Handler.

                      Kommentar


                      • #12
                        Das verstehe ich nicht. onload ist doch selbst schon ein Eventhandler.

                        Kommentar


                        • #13
                          Zitat von psygonis Beitrag anzeigen
                          Das verstehe ich nicht. onload ist doch selbst schon ein Eventhandler.
                          Nein, onload ist eine Objekteigenschaft. Den Handler musst du zur Verfügung stellen.

                          Kommentar


                          • #14
                            Und wie soll das dann zum Beispiel aussehen?

                            Kommentar


                            • #15
                              Zitat von psygonis Beitrag anzeigen
                              Und wie soll das dann zum Beispiel aussehen?
                              Ist dein Internet kaputt?

                              Kommentar

                              Lädt...
                              X