5 օգտակար խորհուրդ HTML-ում ֆայլերի վերբեռնման համար

Ներածություն

Տարբեր հարթակներում ֆայլերի վերբեռնումը սովորական ամենօրյա խնդիր է: Դժվար է պատկերացնել մեր ժամանակակից կյանքը առանց բջջայինի, քանի որ մենք բոլորս էլ կիսում ենք մեր լուսանկարները սոցիալական ցանցերում կամ մեր ռեզյումեն աշխատանք փնտրող կայքերում: 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-ի ուժը ֆայլերի վերբեռնման ներկառուցված աջակցությամբ: Այնուամենայնիվ, կան այլ, նույնիսկ ավելի օգտակար գործառույթներ, որոնք այն կարող է առաջարկել (հոդվածում քննարկվել են դրանցից միայն մի քանիսը):

Առավել մանրամասն ուսումնասիրելու համար խորհուրդ ենք տալիս ծանոթանալ հետևյալ նյութերին՝

• MDN – file type of input
• MDN – File API
• MDN – Using files from web applications
  

Սկզբնաղբյուր՝ Top 5 Useful HTML File Upload Tips

Թարգմանությունը՝ Mariam Abrahamyan