Button’A Dosya Ekleme Html

HTML’de Bir Düğmeye Dosya Ekleme

HTML’de bir düğmeye dosya eklemek, kullanıcıların web siteniz veya uygulamanız aracılığıyla dosya yüklemelerine olanak tanıyan önemli bir özelliktir. Bu, kullanıcıların belgeler, resimler, videolar ve diğer dosya türlerini yüklemelerini sağlayarak etkileşimli ve kullanışlı web deneyimleri oluşturmanıza olanak tanır.

Dosya Yükleme Düğmesi Oluşturma

Bir dosya yükleme düğmesi oluşturmak için <input> etiketini kullanabilirsiniz. type özniteliğini “file” olarak ayarlayın ve düğmeye bir id veya name özniteliği verin:

html
<input type="file" id="dosya-yukle">

Dosya Yükleme İşleyicisi Ekleme

Kullanıcılar düğmeyi tıkladığında, tarayıcı bir dosya seçme iletişim kutusu açar. Kullanıcı bir dosya seçtiğinde, dosya bilgileri düğmenin files özelliğinde saklanır. Dosya yükleme işlemini işlemek için bir JavaScript işleyicisi eklemeniz gerekir:

javascript
document.getElementById("dosya-yukle").addEventListener("change", function() {
// Dosya yükleme işlemini burada işleyin
});

Dosya Bilgilerine Erişme

files özelliği, seçilen dosyaların bir FileList nesnesini içerir. Her dosya, name, size ve type gibi bilgileri içeren bir File nesnesidir. Dosya bilgilerine şu şekilde erişebilirsiniz:

javascript
const dosyalar = document.getElementById("dosya-yukle").files;
for (let i = 0; i < dosyalar.length; i++) {
const dosya = dosyalar[i];
console.log(dosya.name, dosya.size, dosya.type);
}

Dosyayı Sunucuya Yükleme

Dosya bilgilerine eriştiğinizde, dosyayı sunucunuza yükleyebilirsiniz. Bu, bir AJAX isteği veya bir form gönderme kullanılarak yapılabilir. Dosyayı sunucuya yüklemek için şu adımları izleyin:

  1. Bir FormData nesnesi oluşturun.
  2. Dosyayı FormData nesnesine ekleyin.
  3. Bir AJAX isteği veya form gönderme kullanarak FormData nesnesini sunucuya gönderin.

Örnek Kod

İşte bir dosya yükleme düğmesi oluşturan ve dosyayı sunucuya yükleyen tam bir örnek kod:

“`html

“`

Faydalı Kaynaklar

Yayımlandı

kategorisi