Проверка наличия локального файла в js

Question

Друзья, буду признателен за помощь в решении следующей проблемы: Есть набор файлов (картинок) в определенной директории на локальном ПК и есть ХТМЛ-файл в который эти картинки нужно подгрузить. Все картинки названы по определенному шаблону, например, scene-1, scene-2 и тд. Я делал простенький скрипт, который подгружает нужную картинку по нажатию кнопки, по факту увеличивая лишь число в названии файла, но тут стала проблема, как остановить выполнение программы, если картинки закончились. Их может быть любое количество от полного отсутствия до нескольких тысяч, поэтому заранее прописать их все в коде в виде некоего массива невозможно. Я нашел решение вроде вот такого:

  image.onerror = function(){
    num = 0;
    image.src = `./image/locations/scene-${num}.jpg`};

Но вариант с выпадающими в консоль ошибками как-то сильно напрягает. И вот мне интересно, а можно ли это переделать как-то в виде условия или калбек функции? Или может можно сделать некоторую предварительную проверку наличия файла перед выполнением остального скрипта?

let num = 0;

function next_step() {
  num++;
  let div_img = document.getElementById('image_block');
  let image = document.createElement('img');

  image.src = `./image/locations/scene-${num}.jpg`;
  image.className = 'image';
  image.onerror = function(){
    num = 0;
    image.src = `./image/locations/scene-${num}.jpg`};
  div_img.innerHTML = '';
  div_img.appendChild(image);
}
}

Собственно выше приведен все существующий на данный момент код.

Answer 1

Можно попробовать File System API

Метод Window: showDirectoryPicker() позволяет выбрать директорию и получить список файлов, например так:

const directory = await window.showDirectoryPicker({mode: 'read'}); // открываем папку на чтение, получаем разрешение
for await (var [fileName, handler] of directory.entries()){ // проверяем файлы в папке
    console.log(fileName, handler.kind) 
}

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

БЛОГ НА HUSL

Проверка наличия локального файла в js

Ответы (1 шт):