בחירה של יותר מקובץ אחד דרך שדה File בטופס - HTML5 | הבלוג הטכני של סטודיו פייג'רס דיזיין   


בחירה של יותר מקובץ אחד דרך שדה File בטופס - HTML5

שתף בפייסבוק


אם בעבר, כדי להעלות מספר קבצים יחד במסגרת טופס (Form) אחד יצרנו מספר שדות של קובץ ואז עבור כל אחד מהם בחרנו קובץ להעלאה, בא HTML5 ופותר לנו את הבעיה. הרעיון הוא שדרך שדה קובץ אחד (type=file) אנו יכולים לבחור מספר קבצים בחלון שייפתח לאחר לחיצה על כפתור Browse שבשדה זה.

למי שלא יודע, בחירת מספר קבצים בחלון שנפתח לאחר לחיצה על כפתור שדה קובץ נעשה על ידי החזקת כפתור CTRL ובחירת הקבצים מתוך החלון. אם הקבצים נמצאים ברצף ניתן לבחור קובץ ראשון, להחזיק את מקש SHIFT ולבחור את הקובץ האחרון ברצף הקבצים.

איך יוצרים בחירה מרובה של קבצים בשדה קובץ אחד? פשוט - מוסיפים את המאפיין multiple בתוך שדה הקובץ. דוגמא:

<input type="file" multiple >

הוספת המאפיין multiple תאפשר לבחור מספר קבצים בחלון שייפתח. ללא הגדרה זו, תתאפשר בחירה של קובץ אחד בלבד להעלאה.

דוגמא לשדה קובץ ללא multiple המאפשר העלאת קובץ אחד בלבד:

דוגמא לשדה קובץ המאפשר בחירה של מספר קבצים בחלון שייפתח בלחיצה:




שתף בפייסבוק


עמיר קרני

מעוז פיננסים

עמית אמודאי

האחים אהרון