Проверка существования файла в javascript

"Существует файл js" или файл не существует - проверим несколькими способами!

Проверка существования файла в javascript

1. Проверка существования файла в javascript("get").
2. Проверка если файл не существует в javascript("get").
3. Проверка существования файла в javascript("Image").
4. Проверка существования файла в javascript("Image +input").

Проверка существования файла в javascript("get").

Рассмотрим первый вариант "проверки существования файла" для этого вам понадобится:

Html:

Возьмем div с id, в который будем отправлять с помощью innerHTML полученное "существует/не существует" файл.

<div id="id_div"></div>

Javascript:

Вам/мне потребуется реально существующий файл :

https://dwweb.ru/_data/img/personal/about_me_1.png

В предыдущей странице... я использовал уже существующий код и всего-то нужно внутри данного кода написать пару строк "проверки существования файла".

Не буду останавливаться на возвращаемых значениях, то вы сможете прочитать здесь - не вижу смысла повторять тоже самое в очередной раз...

И нам осталось собрать тот код:

Код проверки существования файла по его ссылке:

Html:

<div id="id_div"></div>

Javascript:

<script>

var url= "https://dwweb.ru/_data/img/personal/about_me_1.png";

var req = new XMLHttpRequest();

req.open("GET", url, false);

req.onreadystatechange = () =>

{

 if (req.readyState === 4)

 {

  if (req.status === 200) id_div. innerHTML =('Файл существует');

  else id_div. innerHTML =('Файла не существует');

 }

};

req.send();

</script>

Пример проверки существования файла по его ссылке:

Разместим выше приведенный код "проверки существования файла по его ссылке" - прямо здесь:




Проверка если файл не существует в javascript("get").

Предположим, что ваш файл не существует - для проверки данного утверждения вам потребуется:

Возьмем теорию и практику из предыдущего пункта с единственной разницей, что данного файла не существует!

Код проверки существования файла по его ссылке:

Html:

<div id="id_div_2"></div>

Javascript:

<script>

var url= "https://dwweb.ru/_data/img/personal/about_me.png";

var req = new XMLHttpRequest();

req.open("GET", url, false);

req.onreadystatechange = () =>

{

 if (req.readyState === 4)

 {

  if (req.status === 200) id_div_2 . innerHTML =('Файл существует');

  else id_div_2. innerHTML =('Файла не существует');

 }

};

req.send();

</script>

Пример проверки существования файла по его ссылке:

Разместим выше приведенный код "проверки существования файла по его ссылке" - прямо здесь:




Проверка существования файла в javascript("Image").

Для проверки существования файла можно использовать объект Image - для этого вам понадобится:

Html:

Опять : div с id, в который будем отправлять с помощью innerHTML полученное "существует/не существует" файл.

Javascript:

Создаем новое изображение.

В атрибут src отправляем существующее изображение...

Проверяем на наличие файла с помощью "onload" иначе сработает "onerror".

Соберем весь код:

Код проверки существования файла по его ссылке:

Html :

<div id="is_file"></div>

Javascript:

<script>

var img = new Image();

img.src = "https://dwweb.ru/_data/img/personal/about_me_1.png";

img.onload = () => is_file . innerHTML =('Файл существует');

img.onerror = () => is_file . innerHTML =('Файла не существует');

</script>

Пример проверки существования файла по его ссылке:

Ну и далее... расположим выше приведенный код "проверки существования файла по его ссылке" прямо здесь:




Проверка существования файла в javascript("Image +input)

И далее код для определения существует ли файл и выбран ли он... в поле input...

Оставлю без комментариев...

Просто, что-то притомился... потом возможно опишу...

Html :

<input type="file" id=userfile>

<button id=btn>Определи - существует файл?</button>

<div id="is_file_2"></div>

Javascript:

<script>

btn . onclick = function()

{

let img = new Image();

let file = document.getElementById('userfile').files[0];

if(!file) is_file_2 . innerHTML =('Нужно выбрать файл!');

else

{

img.src = window.URL.createObjectURL(file);

img.onload = () => is_file_2 . innerHTML =('Файл существует');

}

}

</script>

Пример проверки существования файла в поле input:

Определи - существует файл?