Το FormData είναι μια λεπτομερής εισαγωγή και χρήση https://developer.mozilla.org/zh ... ng_FormData_Objects
Οι μέθοδοι και τα συμβάντα του FormData είναι ήδη πολύ ξεκάθαρα εκεί, οπότε δεν θα χάσω χρόνο σε αυτά εδώ. Αυτό το άρθρο εξηγεί κυρίως τη χρήση αντικειμένων FormData και ασύγχρονων αποστολών αρχείων.
Το αντικείμενο FormData μας επιτρέπει να οργανώσουμε μια συλλογή ζευγών κλειδιών-τιμών που αποστέλλονται χρησιμοποιώντας το αντικείμενο XMLHttpRequest. Χρησιμοποιείται κυρίως για την αποστολή δεδομένων φόρμας, αλλά μπορεί να χρησιμοποιηθεί ανεξάρτητα από τα δεδομένα που μεταφέρονται χρησιμοποιώντας φόρμες.
1. Δημιουργήστε ένα αντικείμενο FormData από την αρχή
Μπορείτε να δημιουργήσετε το δικό σας αντικείμενο FormData και στη συνέχεια να προσθέσετε ζεύγη κλειδιού-τιμής στο αντικείμενο μέσω της μεθόδου append(), ως εξής:
Σημείωση: Και τα δύο πεδία "userfile" και "webmasterfile" περιέχουν αρχεία. Ο αριθμός που έχει εκχωρηθεί στο πεδίο "accountnum" μετατρέπεται απευθείας σε συμβολοσειρά με τη μέθοδο FormData.append() (η τιμή του πεδίου μπορεί να είναι αντικείμενο blob, αρχείο ή συμβολοσειρά: εάν η τιμή δεν είναι ούτε αντικείμενο blob ούτε αρχείο, η τιμή μετατρέπεται σε συμβολοσειρά). Αυτό το παράδειγμα δημιουργεί μια παρουσία FormData με τα πεδία "username", "accountnum", "userfile" και "webmasterfile" και, στη συνέχεια, χρησιμοποιεί τη μέθοδο send() του αντικειμένου XMLHttpRequest για την αποστολή των δεδομένων φόρμας. Το πεδίο "webmasterfile" είναι ένα blob. Ένα αντικείμενο blob αντιπροσωπεύει τα ανεπεξέργαστα δεδομένα ενός αντικειμένου αρχείου. Αλλά τα δεδομένα που αντιπροσωπεύονται από το blob δεν χρειάζεται να είναι σε εγγενή μορφή javascript. Η διεπαφή αρχείων βασίζεται σε blob, κληρονομώντας τη λειτουργικότητα blob και επεκτείνοντας την υποστήριξή της για συστήματα αρχείων χρήστη. Για να δημιουργήσετε μια σταγόνα, μπορεί να κληθεί ο κατασκευαστής Blob().
2. Λάβετε ένα αντικείμενο FormData από μια φόρμα HTML
Για να αποκτήσετε ένα αντικείμενο FormData που περιέχει υπάρχοντα δεδομένα φόρμας, πρέπει να καθορίσετε το στοιχείο φόρμας κατά τη δημιουργία του αντικειμένου FormData.
Σαν αυτό:
Μπορείτε επίσης να προσθέσετε επιπλέον δεδομένα μετά τη λήψη του αντικειμένου FormData, ως εξής:
Αυτό σας επιτρέπει να προσθέσετε πρόσθετες πληροφορίες πριν από την αποστολή, όχι απαραίτητα επεξεργασμένες από τον χρήστη.
3. Χρησιμοποιήστε το αντικείμενο FormData για να στείλετε το αρχείο
Μπορείτε να χρησιμοποιήσετε το FormData για να στείλετε αρχεία. Μια απλή <form>μέση μπορεί να <input>περιλαμβάνει ένα στοιχείο:
Στη συνέχεια, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κωδικό για να το στείλετε:
Μπορείτε επίσης να προσθέσετε ένα αρχείο ή ένα αντικείμενο blob απευθείας στο αντικείμενο FormData, ως εξής:
Όταν χρησιμοποιείτε τη μέθοδο append(), μια τρίτη παράμετρος μπορεί να χρησιμοποιηθεί για την αποστολή του ονόματος αρχείου (αποστέλλεται στον διακομιστή μέσω της κεφαλίδας Content-Disposition). Εάν η τρίτη παράμετρος δεν έχει καθοριστεί ή αυτή η παράμετρος δεν υποστηρίζεται, η τρίτη παράμετρος ορίζεται από προεπιλογή σε "blob".
Εάν ορίσετε τις σωστές επιλογές, μπορείτε επίσης να το χρησιμοποιήσετε με το jQuery:
|