Перетаскивание файлов на страницу
Обрабатывайте файлы, перетащенные с рабочего стола.
«Перетаскивание файлов на страницу» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Файлы с рабочего стола
Помимо перемещения элементов, API перетаскивания позволяет пользователям перетаскивать файлы из операционной системы на вашу страницу — это основа зон сброса для загрузки.
Приём сброшенных файлов
Настройка аналогична сбросу элементов: отмените действие по умолчанию в dragover и drop. Разница в том, что вместо getData нужно читать файлы.
dropzone.addEventListener("dragover", (e) => e.preventDefault());dataTransfer.files
При сбросе e.dataTransfer.files содержит FileList со сброшенными объектами File.
dropzone.addEventListener("drop", (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
console.log(files.length, "file(s) dropped");
});Перебор файлов
FileList подобен массиву. Преобразуйте его оператором spread, чтобы перебирать элементы с помощью методов массивов.
const files = [...e.dataTransfer.files];
files.forEach((file) => {
console.log(file.name, file.size, file.type);
});Метаданные файла
Каждый объект File предоставляет name, size (в байтах), type (MIME) и lastModified без чтения содержимого.
console.log(file.name); // "photo.png"
console.log(file.type); // "image/png"
console.log(file.size); // 20481Фильтрация по типу
Проверяйте сброшенные файлы перед обработкой — например, принимайте только изображения.
const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");Чтение содержимого файла
Используйте FileReader, чтобы прочитать файл. readAsText — для текста, readAsDataURL — для предварительного просмотра.
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);Предварительный просмотр сброшенных изображений
URL.createObjectURL(file) мгновенно создаёт адрес для предварительного просмотра, не читая весь файл. После завершения отзовите его, чтобы освободить память.
const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);Элементы и файлы
dataTransfer.items содержит больше информации, чем files: каждый DataTransferItem сообщает kind ("file" или "string") и может предоставить файл или запись каталога.
for (const item of e.dataTransfer.items) {
if (item.kind === "file") {
const file = item.getAsFile();
console.log(file.name);
}
}Загрузка сброшенных файлов
Поместите файлы в FormData и отправьте их методом POST на сервер.
const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });Предотвращение случайной навигации
Если файл сбросить за пределами вашей зоны, браузер перейдёт к нему. Установите защиту для всего документа, чтобы это предотвратить.
window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());Быстрая проверка
Проверьте сброс файлов.
Итоги: перетаскивание файлов
Вы создали зону сброса файлов, прочитали dataTransfer.files, изучили метаданные, отфильтровали файлы по типу, показали предварительный просмотр изображений с помощью объектных адресов, использовали FileReader, загрузили файлы через FormData и предотвратили случайную навигацию. На этом изучение перетаскивания завершено.
Часто задаваемые вопросы
Урок «Перетаскивание файлов на страницу» бесплатный?
Да — полный текст урока «Перетаскивание файлов на страницу» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Перетаскивание файлов на страницу»?
Обрабатывайте файлы, перетащенные с рабочего стола. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Перетаскивание файлов на страницу»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Создание перетаскиваемых элементов
- Цели для сброса и dataTransfer
- Визуальная обратная связь при перетаскивании
- Перетаскивание файлов на страницу