בפוסט זה נלמד על ממשק FormData הזמין בדפדפני האינטרנט המודרניים כחלק ממפרט ה- HTML5.

נראה דוגמאות לשימוש ב- FormData עם Ajax, Angular 7, Ionic ו- React.

מה זה FormData

FormData הוא פשוט מבנה נתונים שניתן להשתמש בו לאחסון צמדי ערך מפתח. בדיוק כמו ששמו מרמז שהוא מיועד להחזקת נתוני טפסים כלומר ניתן להשתמש בהם עם JavaScript לבניית אובייקט המתאים לטופס HTML. זה שימושי בעיקר כשאתה צריך לשלוח נתוני טופס לנקודות קצה של RESTful API, למשל כדי להעלות קבצים בודדים או מרובים באמצעות XMLHttpRequestהממשק, ה- fetch()API או Axios.

באפשרותך ליצור אובייקט FormData על ידי הפעלה מיידית של ממשק FormData באמצעות newהאופרטור באופן הבא:

const formData = new FormData() 

formDataההתייחסות מתייחסת מופע של FormData. אתה יכול להתקשר לשיטות רבות על האובייקט כדי להוסיף ולעבוד עם זוגות נתונים. לכל זוג יש מפתח וערך.

אלה השיטות הזמינות באובייקטים של FormData:

• append(): משמש לצירוף זוג ערכי מפתח לאובייקט. אם המפתח כבר קיים, הערך מתווסף לערך המקורי עבור אותו מפתח,
• delete(): משמש למחיקת צמד ערכי מפתח,
• entries(): מחזיר אובייקט Iterator שבו אתה יכול להשתמש כדי לגלול ברשימה את צמדי ערכי המפתח באובייקט,
• get(): משמש להחזרת הערך עבור מפתח. אם מצורפים מספר ערכים, הוא מחזיר את הערך הראשון,
• getAll(): משמש להחזרת כל הערכים עבור מפתח שצוין,
• has(): משמש כדי לבדוק אם יש מפתח,
• keys(): מחזיר אובייקט Iterator שבו אתה יכול להשתמש כדי לרשום את המפתחות הזמינים באובייקט,
• set(): משמש להוספת ערך לאובייקט, עם המפתח שצוין. זה יקשר את הערך אם כבר קיים מפתח,
• values(): מחזיר אובייקט Iterator לערכים של אובייקט FormData.

דוגמה להעלאת קבצים עם JavaScript וניל

בואו נראה כעת דוגמה פשוטה להעלאת קבצים באמצעות JavaScript וניל, XMLHttpRequestו- FormData.

נווט לתיקיית העבודה שלך וצור index.htmlוקובץ עם התוכן הבא:

   Parcel Sandbox 

אנו פשוט יוצרים מסמך HTML עם זיהוי על ידי appהמזהה. לאחר מכן אנו כוללים את index.jsהקובץ באמצעות תג.

לאחר מכן, צור את index.jsהקובץ והוסף את הקוד הבא:

document.getElementById("app").innerHTML = ` 
File Upload & FormData Example
 `; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); }); 

תחילה אנו מכניסים אלמנט בדף ה- HTML שלנו. זה ישמש לבחירת הקובץ שנעלה.

לאחר מכן, אנו מבררים על אלמנט קלט הקובץ querySelector()בשיטה.

לאחר מכן, אנו מגדירים את uploadFile()השיטה בה אנו מכריזים לראשונה על   API_ENDPOINTמשתנה המחזיק את הכתובת של נקודת הסיום להעלאת הקובץ שלנו. לאחר מכן, אנו יוצרים XMLHttpRequestבקשה FormDataואובייקט ריק .

אנו משתמשים בשיטת הצירוף של FormData כדי להוסיף את הקובץ, שהועבר כפרמטר uploadFile()לשיטה, fileלמפתח. פעולה זו תיצור צמד ערכי מפתח עם fileכמפתח ותוכן הקובץ שהועבר כערך.

לאחר מכן, אנו שולחים את הבקשה send()בשיטה של XMLHttpRequestואנחנו מעבירים את FormDataהאובייקט כטיעון.

לאחר הגדרת uploadFile()השיטה, אנו מאזינים לאירוע השינוי באלמנט ואנו קוראים   uploadFile()לשיטה עם הקובץ שנבחר כארגומנט. לגישה לקובץ event.target.filesממערך.

תוכל להתנסות בדוגמה זו מארגז החול של קוד זה:

העלאת קבצים מרובים

באפשרותך לשנות את הקוד לעיל כדי לתמוך בהעלאת קבצים מרובה.

ראשית, עליך להוסיף את multipleהמאפיין לאלמנט:

כעת תוכל לבחור מספר קבצים מהכונן שלך.

לאחר מכן, שנה את uploadFile()השיטה לקבלת מערך קבצים כוויכוח ופשוט לולאה במערך והוסף את הקבצים FormDataלאובייקט:

const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); }; 

לבסוף, התקשרו לשיטה עם מערך קבצים כארגומנט:

fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); }); 

לאחר מכן, תוכל לבדוק את המדריכים המתקדמים הבאים לשימוש FormDataב- Angular, Ionic ו- React:

• כיצד לפרסם FormData עם זוויתית 7
• תגובה & Axios FormData
• העלאת קבצים מרובה עם Ionic 4 & FormData