Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] einen XMLHttpRequest XMLHttpRequest bzw. einer FormData Formularwerte mits

Einklappen

Neue Werbung 2019

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

  • [Erledigt] einen XMLHttpRequest XMLHttpRequest bzw. einer FormData Formularwerte mits

    Hallo
    Ich nutze einen Script um un Dateien per Javaschript Daten an PHP zusenden.

    Jetzt möchte ich nur gerne mein Http Request so erweitern das ich noch beliebig viele Werte (Formulardaten) mit senden kann. Wie mache ich dass?


    PHP-Code:
     function uploadFile(filestatus) {

            
    // prepare XMLHttpRequest
            
    var xhr = new XMLHttpRequest();
            
    xhr.open('POST'destinationUrl);
            
    xhr.onload = function() {
                
    result.innerHTML += this.responseText;
                
    handleComplete(file.size);
            };
            
    xhr.onerror = function() {
                
    result.textContent this.responseText;
                
    handleComplete(file.size);
            };
            
    xhr.upload.onprogress = function(event) {
                
    handleProgress(event);
            }
            
    xhr.upload.onloadstart = function(event) {
            }

            
    // prepare FormData
            
    var formData = new FormData();  
            
    formData.append('myfile'file); 
        
            
    xhr.send(formData);
        } 


  • #2
    Hallöchen,

    Code:
    formData.append('myValue', 'hello');
    Viele Grüße,
    lotti

    Kommentar


    • #3
      Hast Du mal dran gedacht ein Framework, wie bspw. jQuery zu verwenden?!
      Damit wird das quasi zum Einzeiler:
      Code:
      $.post( 'destination.php', {
              foo:'foo',
              bar:'bar'
          });
      und wenn Du den Rückgabewert aus der PHP-Datei verarbeiten willst fängst Du das über ne function ab:
      Code:
      $.post( 'destination.php', {
              foo:'foo',
              bar:'bar'
          },
          function (data) {
              alert( data );
          }
      );
      $.post / $.ajax
      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

      Kommentar


      • #4
        Hallöchen,

        @Arne: das ändert im Prinzip nichts an der Problemstellung. Wenn man FormData für einen Dateiupload verwendet und zusätzlich benutzerdefinierte Parameter mitsenden möchte, sieht das mit jQuery ähnlich aus:

        PHP-Code:
        var formData = new FormData();

        // Hier wird die ausgewählte Datei angehängt
        formData.append('file'file);

        // Hier werden benutzerdefinierte Parameter angehängt
        formData.append('foo''bar');
        formData.append('boo''far');

        // Uuund weg damit..
        $.ajax({
            
        method'post',
            
        url'api/upload',
            
        dataformData,
            
        contentTypefalse,
            
        processDatafalse,
            
        success: function(response){
                
        console.log(response);
            }
        }); 
        Viele Grüße,
        lotti

        Kommentar


        • #5
          Jo, das war auch nur als Tipp für den TE gedacht, um das XMLHttpRequest-Gedöns zu ersetzen.
          Competence-Center -> Enjoy the Informatrix
          PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

          Kommentar


          • #6
            Zitat von Arne Drews Beitrag anzeigen
            Jo, das war auch nur als Tipp für den TE gedacht, um das XMLHttpRequest-Gedöns zu ersetzen.
            Ist gebongt

            Kommentar


            • #7
              FormData kann im Constructor auch gleich das Formular übergeben werden, damit alle Eingabefelder hinzugefügt werden:

              PHP-Code:
              var form document.getElementById('form');
              var 
              formData = new FormData(form);

              var 
              request = new XMLHttpRequest();
              request.open('POST''http://www.example.com/');
              request.send(formData); 

              Kommentar


              • #8
                Ja, schon klar, es ging dabei aber um zusätzliche ( dynamische ) Felder, daher ist formData.append schon der richtige Hinweis von lottikarotti...
                Competence-Center -> Enjoy the Informatrix
                PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                Kommentar


                • #9
                  Hallo Arne,
                  Danke für den Hinweis dass es auch mit JQuery geht, war mir da nicht ganz sicher.
                  Werde ich in zukünftigen Projekten dann nutzen ist wirklich einfacher.

                  Dass mit dem anhängen per append scheint soweit zu funktionieren verusacht zumindest keine Fehler:

                  formData.append('myValue', 'hello');

                  Nur wie rufe ich den Wert in myValue mit php korrekt auf?

                  Mit
                  Code:
                  print_r($_FILES['myValue']);
                  funktioniert es nicht. Wie ist da der korrekte Befehl?

                  Kommentar


                  • #10
                    Die Form hat eine method="post", nehme ich an?! Wo also könnte sich der Index myValue verstecken?
                    Competence-Center -> Enjoy the Informatrix
                    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                    Kommentar


                    • #11
                      Ja okay ist erledigt

                      Kommentar


                      • #12
                        Jetzt habe ich da ein Ojekt Nodelist wie bekomme ich die mit php ausgegeben?

                        Mit
                        PHP-Code:
                         $hallo $_POST['myValue'];
                            
                        print_r($hallo->nodeValue); 
                        gehts nicht

                        Kommentar


                        • #13
                          NodeValue ist JavaScript, nicht PHP. Die Übergabe scheint nicht korrekt zu sein...
                          Competence-Center -> Enjoy the Informatrix
                          PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                          Kommentar


                          • #14
                            das Auslesen funktioniert noch nicht Wert ist jetzt immer null
                            mit
                            PHP-Code:
                            var form document.getElementById('full'); 
                            PHP-Code:
                            function uploadFile(filestatus) {

                                    
                            // prepare XMLHttpRequest
                                    
                            var xhr = new XMLHttpRequest();
                                    
                            xhr.open('POST'destinationUrl);
                                    
                            xhr.onload = function() {
                                        
                            result.innerHTML += this.responseText;
                                        
                            handleComplete(file.size);
                                    };
                                    
                            xhr.onerror = function() {
                                        
                            result.textContent this.responseText;
                                        
                            handleComplete(file.size);
                                    };
                                    
                            xhr.upload.onprogress = function(event) {
                                        
                            handleProgress(event);
                                    }
                                    
                            xhr.upload.onloadstart = function(event) {
                                    }

                                    
                            // prepare FormData
                                    
                            var formData = new FormData();  
                                    var 
                            form document.getElementById('full');
                                    
                            formData.append('myfile'file); 
                                    
                            formData.append('myValue',form);
                                    
                            xhr.send(formData);
                                    
                            alert(form);
                                } 
                            HTML
                            Code:
                            <input name="name" id="full" type="text" size="30" maxlength="30">

                            Kommentar


                            • #15
                              Dein form Objekt gehört in den Konstruktor von FormData(optional HTMLFormElement form).

                              Kommentar

                              Lädt...
                              X