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

[Darknet]

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?

 function uploadFile(file, status) {

        // 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);
    } 

[lottikarotti]

Hallöchen,

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

Viele Grüße,
lotti

[Arne Drews]

Hast Du mal dran gedacht ein Framework, wie bspw. jQuery zu verwenden?!
Damit wird das quasi zum Einzeiler:

$.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:

$.post( 'destination.php', {
        foo:'foo',
        bar:'bar'
    },
    function (data) {
        alert( data );
    }
);

$.post / $.ajax

[lottikarotti]

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:

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',
    data: formData,
    contentType: false,
    processData: false,
    success: function(response){
        console.log(response);
    }
}); 

Viele Grüße,
lotti

[Arne Drews]

Jo, das war auch nur als Tipp für den TE gedacht, um das XMLHttpRequest-Gedöns zu ersetzen.

[lottikarotti]

Jo, das war auch nur als Tipp für den TE gedacht, um das XMLHttpRequest-Gedöns zu ersetzen.

Ist gebongt

[Blar]

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

var form = document.getElementById('form');
var formData = new FormData(form);

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

[Arne Drews]

Ja, schon klar, es ging dabei aber um zusätzliche ( dynamische ) Felder, daher ist formData.append schon der richtige Hinweis von lottikarotti...

[Darknet]

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

print_r($_FILES['myValue']);

funktioniert es nicht. Wie ist da der korrekte Befehl?

[Arne Drews]

Die Form hat eine method="post", nehme ich an?! Wo also könnte sich der Index myValue verstecken?

[Darknet]

Ja okay ist erledigt

[Darknet]

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

Mit

 $hallo = $_POST['myValue'];
    print_r($hallo->nodeValue); 

gehts nicht

[Arne Drews]

NodeValue ist JavaScript, nicht PHP. Die Übergabe scheint nicht korrekt zu sein...

[Darknet]

das Auslesen funktioniert noch nicht Wert ist jetzt immer null
mit

var form = document.getElementById('full'); 

function uploadFile(file, status) {

        // 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

<input name="name" id="full" type="text" size="30" maxlength="30">

[lottikarotti]

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