Faylların yüklənməsi

11.1 <input type="file"> elementi

Veb-tətbiqlər tez-tez istifadəçilərdən faylları serverə yükləməyi tələb edir. Bu, sənədlərin, şəkillərin, videoların və digər data tipli məlumatların yüklənməsi üçün faydalı ola bilər. HTML faylların yüklənməsi üçün <input type="file"> elementini təqdim edir. Aşağıda bu elementin istifadəsinə və onun multiple və accept kimi atributlarına ətraflı baxacağıq.

<input type="file"> elementi istifadəçilərə cihazlarından faylları seçmək və onları serverə yükləmək imkanı yaradan interfeys elementi yaradır. Bu, veb-tətbiqlərə fayl yükləmə funksionallığını inteqrasiya etməyə imkan verən HTML formalarının açar elementlərindən biridir.

<input type="file"> elementinin əsas atributları

1. type="file" — elementin faylların seçilməsi üçün nəzərdə tutulduğunu müəyyən edir.
2. name — forma məlumatları serverə göndərilərkən istifadə olunacaq elementin adını təyin edir.
3. multiple — istifadəçiyə birdən çox faylı eyni anda seçməyə imkan verir.
4. accept — MIME-tip və ya fayl genişləmələrindən istifadə edərək, seçilə biləcək fayl növlərini göstərir.

<input type="file"> elementinin istifadəsinə dair nümunələr

Sadə nümunə

Heç bir əlavə atributu olmayan fayl yükləmə elementi üçün sadə nümunə:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Faylı seçin:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Yüklə</button>
      </form>
    
  

11.2 Multiple atributu

<input type="file"> elementi bir neçə atributu dəstəkləyir ki, onlar funksionallığını artırır. Bunlardan ikisini nəzərdən keçirək: multiple və accept.

multiple atributu istifadəçilərə birdən çox fayl seçmək imkanı verir. Bu atribut əlavə olunanda istifadəçilər faylları seçmə pəncərəsində bir neçə fayl seçə bilərlər.

İstifadə nümunəsi:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">Faylları seçin:</label>
        <input type="file" id="files" name="files" multiple>
        <button type="submit">Yüklə</button>
      </form>
    
  

11.3 accept atributu

accept atributu istifadəçinin seçə biləcəyi fayl növlərini məhdudlaşdırır. Bu, istifadəçilərin yalnız uyğun fayl növlərini (məsələn, yalnız şəkillər və ya sənədlər) yükləməsini təmin etmək üçün faydalıdır.

İstifadə nümunəsi:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Şəkil seçin:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <button type="submit">Yüklə</button>
      </form>
    
  

accept atributu seçilə bilən fayl növlərini məhdudlaşdırır. Bunu MIME növü və ya fayl uzantıları ilə etmək mümkündür. Yuxarıdakı nümunədə istifadəçilər yalnız şəkil fayllarını seçə bilərlər.

accept atributunun nümunə dəyərləri

Fayl növünə görə məhdudiyyət:

• accept="image/*": hər hansı şəkil faylları
• accept="video/*": hər hansı video faylları
• accept="audio/*": hər hansı audio faylları

Fayl uzantısına görə məhdudiyyət:

• accept=".jpg/.jpeg/.png": yalnız JPEG və PNG formatında olan şəkillər
• accept=".pdf/.doc/.docx": yalnız PDF və Word sənədləri

11.4 Faylların müştəri tərəfində emalı

Bəzən faylların serverə göndərilməzdən əvvəl müştəri tərəfində emal olunması lazım olur. Məsələn, şəkillərin ilkin baxışını göstərmək və ya fayl ölçüsünü yoxlamaq olar. Bunun üçün JavaScript istifadə edilir.

Şəklin ilkin baxışı üçün nümunə:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Şəkil seçin:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <div id="preview"></div>
        <button type="submit">Yüklə</button>
      </form>
    
  

    
      document.getElementById('image').addEventListener('change', function(event) {
        const preview = document.getElementById('preview');
        preview.innerHTML = '';

        const files = event.target.files;

        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const reader = new FileReader();

          reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.maxWidth = '200px';
            preview.appendChild(img);
          }
          reader.readAsDataURL(file);
        }
      });
    
  

İzah

• FileReader: müştəri tərəfində faylların məzmununu oxumaq üçün istifadə olunur
• reader.onload: fayl tam oxunduqda işləyən hadisə
• reader.readAsDataURL(file): faylı oxuyub onu Data URL kimi kodlaşdıran metod, bu da onu <img> etiketində göstərməyə imkan verir

1

Опрос

Form elementləri,  9 уровень,  5 лекция

недоступен

Form elementləri

Form elementləri

Открыть