Работа с файлами и их загрузка на сайт – важный аспект веб-разработки. В этой статье мы рассмотрим основные методы работы с файлами и примеры использования загрузки файлов на сайт. 📁
Основы работы с файлами
Открытие и закрытие файлов
Для работы с файлами, сначала нужно их открыть. В JavaScript это можно сделать с помощью объекта FileReader. Вот пример открытия файла для чтения:
const fileInput = document.querySelector("#fileInput");
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result);
};
reader.readAsText(file);
});
После выполнения всех операций с файлом не забывайте его закрыть. В случае с FileReader это происходит автоматически после события onload.
Чтение и запись файлов
Для чтения файлов используйте методы readAsText, readAsArrayBuffer или readAsDataURL объекта FileReader. Запись файлов возможна с использованием библиотек, таких как FileSaver.js.
Пример сохранения текстового файла:
import { saveAs } from "file-saver";
const text = "Hello, world!";
const blob = new Blob(, { type: "text/plain;charset=utf-8" });
saveAs(blob, "hello_world.txt");
Загрузка файлов на сервер
Для загрузки файлов на сервер используется объект FormData и метод fetch. Вот пример загрузки файла на сервер:
const fileInput = document.querySelector("#fileInput");
fileInput.addEventListener("change", async (event) => {
const file = event.target.files[0];
const formData = new FormData();
formData.append("file", file);
const response = await fetch("/upload", {
method: "POST",
body: formData,
});
console.log(response.status);
});
Сервер должен быть настроен для приема файлов. Например, в Node.js с использованием Express и multer:
const express = require("express");
const multer = require("multer");
const app = express();
const upload = multer({ dest: "uploads/" });
app.post("/upload", upload.single("file"), (req, res) => {
res.sendStatus(200);
});
app.listen(3000, () => console.log("Server listening on port 3000"));
🚀 Теперь вы знаете основы работы с файлами и загрузки файлов на сайте. Продолжайте изучение веб-разработки и удачи вам на этом пути!
Добавить комментарий