Ներածություն
Տարբեր հարթակներում ֆայլերի վերբեռնումը սովորական ամենօրյա խնդիր է: Դժվար է պատկերացնել մեր ժամանակակից կյանքը առանց բջջայինի, քանի որ մենք բոլորս էլ կիսում ենք մեր լուսանկարները սոցիալական ցանցերում կամ մեր ռեզյումեն աշխատանք փնտրող կայքերում: HTML-ն այս գործընթացի անբաժանելի մասն է, որը ներկառուցված աջակցություն է տրամադրում JavaScript-ի միջոցով ֆայլեր բեռնելու համար:
Այս հոդվածում մենք կքննարկենք HTML-ում ֆայլեր վերբեռնելու հինգ տարբեր եղանակներ:
1. Ֆայլերի վերբեռնման պարզ տարբերակ
Ֆայլերի բեռնիչի(file uploader) գործառույթն օգտագործելու համար անհրաժեշտ է օգտագործել input էլեմենտը և սահմանել type="file" ատրիբուտը, ինչը թույլ է տալիս օգտվողներին վերբեռնել մեկ կամ մի քանի ֆայլ կոճակի սեղմումով: Դիտարկենք օրինակ.
<!-- Սահմանեք տեսակը «ֆայլ» -->
<input id="file-uploader" type="file" />
Հաջող վերբեռնման դեպքում ֆայլերի API-ն հեշտացնում է ֆայլի օբյեկտի ընթերցումը JavaScript-ի միջոցով․ նախ պետք է ընտրեք input-ը, այնուհետև լսեք ֆայլի բեռնիչի change(փոփոխություն) իրադարձությունը(event): Դիտարկենք հետևյալ օրինակը.
// Ընտրում ենք մուտքային տվյալները.
const fileUploader = document.getElementById('file-uploader');
// Փոփոխության իրադարձությունը(change ivent).
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
console.log('files', files); // Ֆայլային օբյեկտը դուրս է բերվում կոնսոլից.
});
Նայեք ձեր բրաուզերի կոնսոլի արդյունքին: Նկատի ունեցեք, որ fileList զանգվածը ֆայլային օբյեկտով պարունակում է բոլոր լրացուցիչ տեղեկությունները (մետադատաներ) վերբեռնված ֆայլի մասին:
2. Մի քանի ֆայլերի վերբեռնում
Դուք կարող եք վերբեռնել բազմաթիվ ֆայլեր: Դա անելու համար մուտքագրված տվյալների մեջ օգտագործվում է multiple ատրիբուտը: Ահա մի օրինակ.
<!-- Մի քանի ֆայլերի վերբեռնում -->
<input type="file" id="file-uploader" multiple />
Ինչպես առաջին օրինակում, մենք կկարդանք ֆայլային օբյեկտը կոնսոլից: Այժմ fileList զանգվածը ֆայլային օբյեկտի ներսում պարունակում է մի քանի տարրեր, քանի որ մի քանի ֆայլեր են վերբեռնվել.
3. Ֆայլի մետադատաներ
Երբ ֆայլ եք վերբեռնում, File օբյեկտը պարունակում է որոշ մետատվյալներ (ֆայլի անվանումը, չափը, վերջին թարմացման ժամանակը, տեսակը և այլն): Դուք կարող եք դա ստուգել ձեր կոնսոլում, ինչպես մենք արել ենք վերեւում: Այսպիսի տվյալների առկայությունը կարող է օգտակար լինել, եթե անհրաժեշտ է դրանք ցուցադրել էջում փաստաթղթի օբյեկտային մոդելի մակարդակի մանիպուլյացիաների միջոցով.
// Ստանում ենք ֆայլերի վերբեռնիչը ID- ով
const fileUploader = document.getElementById('file-uploader');
// Լսում ենք փոփոխման իրադարձությունը եւ կատարում ենք մետադատայի ընթերցումը
fileUploader.addEventListener('change', (event) => {
// Получаем массив FileList
const files = event.target.files;
//Ցիկլ ենք անում ֆայլերի մեջ ստանում դրան մետադատաները
for (const file of files) {
const name = file.name;
const type = file.type ? file.type: 'NA';
const size = file.size;
const lastModified = file.lastModified;
console.log({ file, name, type, size, lastModified });
}
});
Այս տեղեկատվությունը կարող է օգտակար լինել հետագա վալիդացիաների եւ որոշումների կայացման համար:
4. «Accept» հատկությունը
Բեռնվող ֆայլերի տեսակի սահմանափակման համար օգտագործվում է accept հատկանիշը, ինչպես այս օրինակում:
<!-- accept հատկանիշ -->
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
Այստեղ կարելի է ընտրել միայն jpg եւ png ֆորմատի ֆայլեր:
5. Ֆայլի բովանդակության կառավարում
Ֆայլը վերբեռնելուց հետո լավ կլիներ, որ դրա բովանդակությունը ցուցադրվեր: Սա հիմնականում վերաբերում է պրոֆիլային լուսանկարներին կամ վիդեո պատկերներին։ Օգտատիրոջը չշփոթեցնելու համար պետք է նկարը ցույց տաք հենց այն ժամանակ, երբ այն վերբեռնված է։ Կամ գոնե ասեք, որ ֆայլը վերբեռնվել է: FileReader օբյեկտը օգտագործվում է ֆայլը երկուական տողի վերածելու համար: Այնուհետեւ ավելացնում ենք load իրադարձության լսող(event listener), որպեսզի ֆայլը հաջողությամբ բեռնվելուն պես ստանանք երկուական տող: Ահա մի օրինակ.
// Ստանում ենք FileReader-ի օրինակ
const reader = new FileReader();
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
const file = files[0];
//Բեռնելուց հետո ֆայլային օբյեկտ ենք ստանում եւ կարդում
// URL- ի երկակի տողի տեսքով տվյալներ
reader.readAsDataURL(file);
// Բեռնելուց հետո մենք ինչ-որ բան ենք անում տողի հետ:
reader.addEventListener('load', (event) => {
// Այստեղ մենք ստեղծում ենք պատկերային պիտակ եւ ավելացնում ենք
//նրա պատկերը.
const img = document.createElement('img');
imageGrid.appendChild(img);
img.src = event.target.result;
img.alt = file.name;
});
});
Եզրակացություն
HTML-ում ֆայլերի վերբեռնումը շատ օգտակար է: Այս ֆունկցիոնալությունը գործարկելու համար ոչ մի գրադարան չի պահանջվում: Չի կարելի թերագնահատել HTML-ի ուժը ֆայլերի վերբեռնման ներկառուցված աջակցությամբ: Այնուամենայնիվ, կան այլ, նույնիսկ ավելի օգտակար գործառույթներ, որոնք այն կարող է առաջարկել (հոդվածում քննարկվել են դրանցից միայն մի քանիսը):
Առավել մանրամասն ուսումնասիրելու համար խորհուրդ ենք տալիս ծանոթանալ հետևյալ նյութերին՝
Սկզբնաղբյուր՝ Top 5 Useful HTML File Upload Tips
Թարգմանությունը՝ Mariam Abrahamyan
