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 JPEGaccept="image/*": tüm resim türleriaccept=".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 belgesi
- image/jpeg
- JPEG resim