0Pricing
JavaScript Academy · Lekcja

Przeciąganie plików na stronę

Proszę obsługiwać pliki upuszczone z pulpitu.

Przeciąganie plików na stronę to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Pliki z pulpitu

Oprócz przenoszenia elementów interfejs Drag and Drop pozwala użytkownikom przeciągać pliki z systemu operacyjnego na stronę — to podstawa stref upuszczania plików.

Akceptowanie upuszczanych plików

Konfiguracja jest analogiczna do upuszczania elementów: należy zablokować domyślne działanie w dragover i drop. Różnica polega na odczytywaniu plików zamiast używania getData.

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

dataTransfer.files

Podczas upuszczania e.dataTransfer.files jest obiektem FileList zawierającym upuszczone obiekty File.

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

Iterowanie po plikach

FileList przypomina tablicę. Należy przekonwertować go za pomocą operatora spread, aby iterować po elementach przy użyciu metod tablicowych.

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

Metadane pliku

Każdy obiekt File udostępnia name, size (w bajtach), type (MIME) i lastModified bez odczytywania zawartości pliku.

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

Filtrowanie według typu

Przed przetworzeniem należy sprawdzić poprawność upuszczonych plików — na przykład akceptować tylko obrazy.

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

Odczytywanie zawartości plików

Do odczytywania pliku należy użyć FileReader. readAsText służy do tekstu, a readAsDataURL do podglądów.

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

Wyświetlanie podglądu upuszczonych obrazów

URL.createObjectURL(file) natychmiast zwraca adres URL podglądu bez odczytywania całego pliku. Po zakończeniu należy go unieważnić, aby zwolnić pamięć.

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

items a files

dataTransfer.items zawiera więcej informacji niż files: każdy element DataTransferItem udostępnia kind ("file" lub "string") i może zwrócić plik lub wpis katalogu.

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

Przesyłanie upuszczonych plików

Należy umieścić pliki w obiekcie FormData i wysłać je metodą POST do serwera.

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

Zapobieganie przypadkowej nawigacji

Jeśli plik zostanie upuszczony poza strefą, przeglądarka przejdzie do tego pliku. Należy zabezpieczyć cały dokument, aby temu zapobiec.

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

Szybki test

Przetestować upuszczanie plików.

Podsumowanie: przeciąganie plików

Utworzono strefę upuszczania plików, odczytano dataTransfer.files, sprawdzono metadane, odfiltrowano pliki według typu, wyświetlono podglądy obrazów za pomocą adresów URL obiektów, użyto FileReader, przesłano pliki za pomocą FormData i zapobiegano przypadkowej nawigacji. To kończy temat Drag and Drop.

Często zadawane pytania

Czy lekcja „Przeciąganie plików na stronę” jest bezpłatna?

Tak — pełny tekst „Przeciąganie plików na stronę” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Przeciąganie plików na stronę”?

Proszę obsługiwać pliki upuszczone z pulpitu. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Przeciąganie plików na stronę”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Tworzenie elementów przeciągalnych
  2. Miejsca upuszczania i dataTransfer
  3. Informacja wizualna podczas przeciągania
  4. Przeciąganie plików na stronę
← Powrót do JavaScript Academy