Как работать с файлами и загрузкой файлов на сайте

Работа с файлами и их загрузка на сайт – важный аспект веб-разработки. В этой статье мы рассмотрим основные методы работы с файлами и примеры использования загрузки файлов на сайт. 📁

Основы работы с файлами

Открытие и закрытие файлов

Для работы с файлами, сначала нужно их открыть. В 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"));

🚀 Теперь вы знаете основы работы с файлами и загрузки файлов на сайте. Продолжайте изучение веб-разработки и удачи вам на этом пути!