File upload

<input type="file">, multiple, accept kullanırsın.

Dosya yükleme input'u

Dosya yüklemek için <input type="file"> kullanırsın. Tarayıcı bir 'Dosya seç' düğmesi gösterir; kullanıcı dosyayı seçer ve form gönderildiğinde dosya sunucuya yüklenir.

Örnek: <input type="file" name="avatar">. Form etiketinde method="post" ve enctype="multipart/form-data" olmalı; yoksa dosya gönderilmez.

Bu öznitelikleri daha önce görmüştün; şimdi dosya input'unun kendine ait multiple ve accept özniteliklerine bakacağız.

multiple ile birden çok dosya

Varsayılan olarak dosya input'u yalnızca tek bir dosya kabul eder. Birden çok dosya için multiple özniteliğini ekle:

<input type="file" name="photos" multiple>

Artık kullanıcı bir klasörden Ctrl (veya Cmd) ile birden çok dosya seçebilir. Sunucu tarafında photos alanı bir dosya listesi olarak gelir.

multiple boole (boolean) özniteliğidir; değeri yoktur, varlığı yeter.

accept ile dosya türü kısıtı

accept özniteliği, hangi dosya türlerinin seçilebileceğini kısıtlar. Kullanıcıya dosya penceresinde yalnızca uygun dosyaları gösterir.

Örnekler:

accept="image/png, image/jpeg": yalnızca PNG ve JPEG
accept="image/*": tüm resim türleri
accept=".pdf": yalnızca PDF

accept yalnızca ipucudur; sunucu yine de gelen dosyayı doğrulamalıdır.

Uygulama Avatar yükleyici formu yaz

Body içine bir <form> ekle. İçine bir <label for="avatar"> ve bir <input type="file" id="avatar" name="avatar"> koy. Input'a accept="image/png, image/jpeg" özniteliğini ekle (yalnızca PNG ve JPEG). multiple özniteliğini de ekle (çoklu dosya).

Örnek çözümü göster

<body>
  <form>
    <label for="avatar">Profil fotoğrafı</label>
    <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple>
  </form>
</body>

Kendini test et

Dosya yükleme alanı için hangi input türü kullanılır?
- text
- file
- hidden
- submit
Cevabı göster

file — Doğru. type="file" bir dosya yükleme alanı üretir.

Çoklu dosya için input'u tamamla

<input type="file" name="photos" ____>

Cevabı göster

<input type="file" name="photos" multiple>

accept değerini dosya türüyle eşleştir

image/png

PNG resim
image/*

Tüm resimler
.pdf

PDF belgesi
image/jpeg

JPEG resim

Sıradaki ders: Range ve color

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler