JavaScript Academy · Ders

Dosyaları Sayfaya Sürükleme

Masaüstünden bırakılan dosyaları yönetin.

Dosyaları Sayfaya Sürükleme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Masaüstünden dosyalar

Öğeleri taşımanın yanı sıra Sürükle ve Bırak API'si, kullanıcıların işletim sistemlerinden dosyaları sayfanıza sürüklemesine olanak tanır. Bu özellik, dosya yükleme bırakma alanlarının temelini oluşturur.

Dosya bırakmalarını kabul etme

Kurulum, öğe bırakma işlemlerine benzer: dragover ve drop üzerinde varsayılan davranışı engelleyin. Fark, getData yerine dosyaları okumanızdır.

dropzone.addEventListener("dragover", (e) => e.preventDefault());

dataTransfer.files

Bırakma sırasında e.dataTransfer.files, bırakılan File nesnelerinden oluşan bir FileList listesidir.

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log(files.length, "file(s) dropped");
});

Dosyalar üzerinde yineleme

FileList dizi benzeri bir yapıdır. Dizi yöntemleriyle yineleme yapmak için yayma işleciyle dönüştürün.

const files = [...e.dataTransfer.files];
files.forEach((file) => {
  console.log(file.name, file.size, file.type);
});

Dosya üst verileri

Her File, içeriğini okumadan name, size (bayt), type (MIME) ve lastModified bilgilerini sunar.

console.log(file.name);          // "photo.png"
console.log(file.type);          // "image/png"
console.log(file.size);          // 20481

Türe göre filtreleme

İşlemeden önce bırakılan dosyaları doğrulayın; örneğin yalnızca görselleri kabul edin.

const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");

Dosya içeriğini okuma

Bir dosyayı okumak için FileReader kullanın. Metin için readAsText, önizlemeler için readAsDataURL kullanın.

const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);

Bırakılan görselleri önizleme

URL.createObjectURL(file), dosyanın tamamını okumadan anında kullanılabilecek bir önizleme URL'si sağlar. Belleği boşaltmak için işiniz bittiğinde bu URL'yi iptal edin.

const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);

öğeler ve dosyalar

dataTransfer.items, files özelliğinden daha kapsamlıdır: her DataTransferItem, kind değerini ("file" veya "string") bildirir ve bir dosya ya da dizin girdisi sağlayabilir.

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  }
}

Bırakılan dosyaları yükleme

Dosyaları FormData içine sarın ve sunucunuza POST isteğiyle gönderin.

const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });

Yanlışlıkla gezinmeyi önleme

Bir dosya alanınızın dışına bırakılırsa tarayıcı o dosyaya gider. Bunu durdurmak için belgenin tamamında önlem alın.

window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

Kısa kontrol

Dosya bırakma işlemlerini deneyin.

Özet: Dosyaları sürükleyerek içeri alma

Bir dosya bırakma alanı oluşturdunuz, dataTransfer.files okudunuz, üst verileri incelediniz, türe göre filtreleme yaptınız, nesne URL'leriyle görselleri önizlediniz, FileReader kullandınız, FormData ile yükleme yaptınız ve yanlışlıkla gezinmeyi önlediniz. Böylece Sürükle ve Bırak konusu tamamlandı.

Sıkça Sorulan Sorular

“Dosyaları Sayfaya Sürükleme” dersi ücretsiz mi?

Evet — “Dosyaları Sayfaya Sürükleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Dosyaları Sayfaya Sürükleme” dersinde ne öğreneceğim?

Masaüstünden bırakılan dosyaları yönetin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Dosyaları Sayfaya Sürükleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Öğeleri Sürüklenebilir Hale Getirme
Bırakma Hedefleri ve dataTransfer
Sürükleme Sırasında Görsel Geri Bildirim
Dosyaları Sayfaya Sürükleme

← JavaScript Academy Sayfasına Dön