πως δουλευει το FormData της HTML5 ?

[slevinkelevra]

Καλησπερα

 

Εχω ενα απλό κωδικα με την FormData και όλα καλα...

var form = document.getElementById("myform");
var formDataobj = new FormData(form);
var hr = new XMLHttpRequest();
hr.open("POST", "phppost.php");
hr.onreadystatechange = function() {
     if(hr.readyState == 4 && hr.status == 200) {
            document.getElementById("results").innerHTML = hr.responseText;
     }
}

var str = JSON.stringify(formDataobj, null, 4);
console.log(str); 
alert(str); 

hr.send(formDataobj);

Το phppost εχει μεσα απλα 

 

<?php
print_r($_POST);
?>

 

Το προβλημα

 

Ενω το str δειχνει κανονικα ενα οποιοδηποτε αλλο js obj, το obj που κατασκευαστηκε απο το FormData δε το δειχνει, μου δειχνει απλα {} 

 

Αν κανω 

console.log(formDataobj) 

μου λεει οτι ειναι object. Αλλα, αν θυμαμαι καλα, με XHR δεν στελνουμε obj,στελνουμε urlencoded ή json ή multipart/form-data μόνο.

 

Εδω αν δεν ορισω καθολου Content-type ολα δουλευουν ρολοι. Αν ορισω application/x-www-form-urlencoded που ειναι κ το default, μου δινει

Array ( [------WebKitFormBoundary2qY0oGJKmnMTpo7V Content-Disposition:_form-data;_name] => "bananas" 2 ------WebKitFormBoundary2qY0oGJKmnMTpo7V Content-Disposition: form-data; name="apples" 5 ------WebKitFormBoundary2qY0oGJKmnMTpo7V Content-Disposition: form-data; name="cherries" 20 ------WebKitFormBoundary2qY0oGJKmnMTpo7V-- )

 Αν ορισω application/json, μου δινει Array ( )

 Αν ορισω multipart/form-data, μου δινει Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

Array ( )

 

Ερωτησεις

 

1- Γιατι δε μπορω να τυπωσω το FormData ? Να δω τι περιεχει?

 

2- Τελικα το FormData πως δουλευει? Στελνει οντως ενα obj? Εχει καποια κρυφη μεθοδο που μετατρεπει τα properties σε urlencoded ή σε json ? 

 

3- Τι παιζει τελικα με το Content-type του FormData ? Αμα το αφησω χωρις τιποτα, ολα καλα. Αμα ορισω καποιο, γινετε χαμος.

 

Ευχαριστω πολυ. 

 

 

[DeadElectron]

1) Το λάθος που κάνεις είναι ότι προσπαθείς να κάνεις stringify σε function constructor, το οποίο δεν γίνεται. Μπορείς να κάνεις stringify πχ 'καθαρά' objects που περιέχουν 'καθαρά' objects, arrays, booleans etc αλλά όχι κάποια συνάρτηση. Αυτό γίνεται γιατί οι συναρτήσεις έχουν, επιπλέον, και το scope τους. Ωστόσο, αν προσπαθήσεις να το κάνεις αυτό που συχνά γίνεται είναι να παραλείπονται τα properties που αντιστοιχούν στις συναρτήσεις. Γι' αυτό σου επιστρέφει:

{}

2) Αν για παράδειγμα αντί για FormData χρησιμοποιούσες τον κλασσικό τρόπο για να πάρεις τις τιμές της φόρμας και δημιουργούσες ένα απλό object, τότε πριν κάνεις το send θα έπρεπε να κάνεις stringify. Τώρα που χρησιμοποιείς όμως αυτόν τον constructor δεν χρειάζεται να κάνεις τίποτα άλλο πέρα από το send.

 

3) Όπως αναφέρεται και στο API Documentation, η όλη αυτή διαδικασία χρησιμοποιεί το ίδιο format που θα χρησιμοποιούσε μια απλή form με Content-type "multipart/form-data". Οπότε δεν χρειάζεται να πειράξεις κάτι.

[slevinkelevra]

Σ ευχαριστω πολυ. Καποιες παρατηρησεις μονο. 

 

1- Ναι αλλα δεν κανω stringify το FormData, κανω το formDataobj, που ειναι ενα obj, αποτελεσμα της FormData. Γ αυτο μου φαινετε περιεργο που δεν μπορω να το δω

 

2- Tο console.log μου λεει οτι το formDataobj ειναι obj, αλλα εγω ηξερα οτι δεν στελνουμε αυτουσιο obj με ajax. Αρα λογικα ο constructor κανει καποια στιγμη stringify πριν την αποστολη, υποθετω

 

3- Ναι εχεις δικιο οτι το Content-type ειναι multipart/form-data, αλλα οταν οριζω ρητα το setRequestHeader("Content-type", "multipart/form-data"); τοτε μου δινει Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

Array ( ) . Και αυτο μου φαινετε περιεργο, γιατι να φαει κομπλα με το Content-type που θα επρεπε να εχει. 

 

Ευχαριστω και παλι

[DeadElectron]

Σ ευχαριστω πολυ. Καποιες παρατηρησεις μονο. 

 

1- Ναι αλλα δεν κανω stringify το FormData, κανω το formDataobj, που ειναι ενα obj, αποτελεσμα της FormData. Γ αυτο μου φαινετε περιεργο που δεν μπορω να το δω

 

2- Tο console.log μου λεει οτι το formDataobj ειναι obj, αλλα εγω ηξερα οτι δεν στελνουμε αυτουσιο obj με ajax. Αρα λογικα ο constructor κανει καποια στιγμη stringify πριν την αποστολη, υποθετω

 

3- Ναι εχεις δικιο οτι το Content-type ειναι multipart/form-data, αλλα οταν οριζω ρητα το setRequestHeader("Content-type", "multipart/form-data"); τοτε μου δινει Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

Array ( ) . Και αυτο μου φαινετε περιεργο, γιατι να φαει κομπλα με το Content-type που θα επρεπε να εχει. 

 

Ευχαριστω και παλι

 

1)Το object που σου επιστρέφει ο constructor έχει όλες τις μεθόδους του στο __proto__. Το JSON.stringify όμως, για ευνόητους λόγους, μετατρέπει μόνο τα properties που είναι άμεσα συνδεδεμένα με το object, δηλαδή δεν ακολουθεί το prototype chain. Γι' αυτό, εν τέλει, παίρνεις empty object

 

2) Δες actual implementation για να σου φύγει η περιέργεια

[alou]

Αυτό πήγα να πω και γω, βρήκα ένα 2 polyfill που μοιάζουν

 

https://github.com/jimmywarting/FormData/blob/master/FormData.js

 

https://gist.github.com/Rob--W/8b5adedd84c0d36aba64