Проверка наличия файла на сервере: jQuery и JavaScript

Быстрый ответ

Ищете решение в одной строке кода? Воспользуйтесь JavaScript API fetch. Отправьте запрос и, если статус ответа — 200, значит, файл найден. Попытайтесь так:

fetch('file.ext').then(r => r.status === 200 ? console.log('Файл найден') : console.log('Файл не найден')).catch(e => console.error(e));

Магия $.ajax() в jQuery

Для почитателей jQuery метод $.ajax c типом запроса HEAD станет настоящим волшебным жезлом. Он быстр и не требует больших ресурсов.

$.ajax({
  url: 'file.ext',
  type: 'HEAD',
  success: () => console.log('Файл существует'),
  error: () => console.log('Файл не найден')
});

Старая добрая школа: XMLHttpRequest

Не используете jQuery? Не вопрос. Используйте XMLHttpRequest с методом HEAD. Он, возможно, кажется устаревшим, но по-прежнему эффективно выполняет свою функцию.

let req = new XMLHttpRequest();
req.open('HEAD', 'file.ext', true);
req.onreadystatechange = () => {
  if (req.readyState === 4) {
    if (req.status === 200) 
      console.log('Файл существует');
    else 
      console.log('Файла не существует');
  }
};
req.send();

Картина маслом: использование объекта Image

Попробуйте нестандартный подход: проверьте наличие изображения с помощью объекта Image в JavaScript. Успешная загрузка говорит о том, что изображение найдено.

let img = new Image();
img.onload = () => console.log('Изображение есть');
img.onerror = () => console.log('Изображение не найдено');
img.src = 'image.ext';

Рисковые зоны и спасательные меры

Будьте осторожны; ошибки и проблемы с кросс-доменностью могут подорвать надёжность вашего кода.

Асинхронные вызовы и статусы HTTP на страже безопасности

Асинхронный вызов сделает код более быстрым, а проверка статуса HTTP поможет точно определить, существует файл или нет.

Подробнее об этом расскажет наш спикер на видео

Особенности перекрёстных запросов: Cross Origin Issues

Если вы работаете с ресурсами другого источника, убедитесь, что сервер поддерживает CORS-заголовки, чтобы избежать проблем с доступностью.

Используйте асинхронность

Избегайте синхронных XMLHttpRequest, потому что они могут замедлить производительность интерфейса. Всегда стремитесь к асинхронности.

Визуализация

Продолжим нашу игру в прятки на JavaScript, теперь искать будем файлы.

let fileExists = '📄✅';
let fileDoesNotExist = '📭❌';

// Игра начинается, готов ли файл?
fetch('path/to/file.txt')
  .then(response => {
    if(response.ok) 
      console.log(fileExists);
    else 
      console.log(fileDoesNotExist);
  })
  .catch(() => console.log(fileDoesNotExist));

Представьте, что вы плывёте по Океану файлов, ища определённый файл:

Где же файл? 🐠:
- Нашёл! 👀 => 🌊🌊🌊[📄✅]🌊🌊
- Нет его тут 👀 => 🌊🌊🌊[📭❌]🌊🌊

Бинарные и нетекстовые файлы, включая изображения

Мы не забыли и о других типах файлов, кроме текстовых.

Бинарные файлы: Blob и ArrayBuffer

Для работы с бинарными данными достаточно воспользоваться теми же методами, что и для текстовых файлов, но с небольшими корректировками в запросе для экономии трафика.

Изображения: значение высоты

При проверке наличия файла изображения достаточно проверить свойство height объекта Image.

Безопасность и производительность на первом месте

Будьте бдительны

Берегите безопасность своих данных, проверяя наличие файлов, и избегайте доступа к чувствительным участкам файловой системы. Такие проверки могут быть недостаточны для критически важных приложений.

Скорость важна

Используйте метод HEAD для экономии трафика и времени, при этом получая только заголовки, не загружая весь файл.

Включайте кэширование

Используйте стратегии кэширования для снижения нагрузки на сервер — это ваша быстрая дорога к высокой скорости.

Полезные материалы

1. Fetch API – Web APIs | MDN — Современный подход к HTTP-запросам в JavaScript.
2. File system | Node.js Documentation — Руководство по проверке наличия файла в Node.js через модуль fs.
3. GitHub – axios/axios: Promise-based HTTP client — Надёжный HTTP-клиент для браузера и Node.js.
4. JavaScript closure inside loops — Подробное объяснение работы с замыканиями JavaScript в циклах.
5. Using Fetch | CSS-Tricks — Комплексное руководство по Fetch API.
6. jQuery.get() | jQuery API Documentation — Подробное изучение метода .get() в jQuery.