Как проверить, существует ли файл в jQuery или чистом JavaScript?
Как проверить, существует ли файл на моем сервере в jQuery или чистом JavaScript?
20 ответов
С помощью jQuery:
$.ajax({
url:'http://www.example.com/somefile.ext',
type:'HEAD',
error: function()
{
//file not exists
},
success: function()
{
//file exists
}
});
РЕДАКТИРОВАТЬ:
Вот код для проверки статуса 404, без использования jQuery
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
Небольшие изменения, и он может проверить статус HTTP-код состояния 200 (успех), вместо этого.
Подобный и более современный подход.
$.get(url)
.done(function() {
// exists code
}).fail(function() {
// not exists code
})
Это работает для меня:
function ImageExist(url)
{
var img = new Image();
img.src = url;
return img.height != 0;
}
Я использовал этот скрипт, чтобы добавить альтернативное изображение
function imgError()
{
alert('The image could not be loaded.');
}
HTML:
<img src="image.gif" onerror="imgError()" />
Пока вы тестируете файлы в одном домене, это должно работать:
function fileExists(url) {
if(url){
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.send();
return req.status==200;
} else {
return false;
}
}
Обратите внимание, что в этом примере используется запрос GET, который помимо получения заголовков (все, что вам нужно для проверки, существует ли файл), получает весь файл. Если файл достаточно большой, этот метод может занять некоторое время.
Лучший способ сделать это - изменить эту строку: req.open('GET', url, false); в req.open('HEAD', url, false);
Вот как это сделать ES7, если вы используете Babel Transpiler или Typescript 2:
async function isUrlFound(url) {
try {
const response = await fetch(url, {
method: 'HEAD',
cache: 'no-cache'
});
return response.status === 200;
} catch(error) {
// console.log(error);
return false;
}
}
Тогда внутри вашего другого async область, вы можете легко проверить, существует ли URL:
const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');
console.log(isValidUrl); // true || false
При попытке получить ответ на этот вопрос у меня возникла проблема с междоменными разрешениями, поэтому я решил:
function UrlExists(url) {
$('<img src="'+ url +'">').load(function() {
return true;
}).bind('error', function() {
return false;
});
}
Кажется, работает отлично, надеюсь, это поможет кому-то!
Ни один из ответов не учитывает кеш браузера!
Все предоставленные ответы не будут выполнены, если браузер сделает предыдущий HTTP-запрос к файлу без
Cache-Control: no-storeзаголовок. Затем запрос XMLHttpRequest к файлу на сервере перехватывается кешем браузера, и возвращается кешированный ответ. Но пока файл может быть удален на сервере.
Правильным решением было бы создать некэшированный HTTP-запрос HEAD:
const fileExists = file =>
fetch(file, {method: 'HEAD', cache: 'no-store'})
.then(response => response.status==200);
fileExists("yourFile.html").then(yes => yes && alert("yourFile.html exists"));
Вы также должны иметь в виду, что может произойти перенаправление (ответы 3xx), поэтому файл может существовать в другом месте и может быть возвращен из другого места: в зависимости от варианта использования можно выбрать выполнение перенаправления вместо возврата false в этом случае.
Также имейте в виду, что фоновые запросы будут заблокированы, если вы проверите существование файла в другом домене и его политика CORS не будет открыта для вашего сервера.
Поскольку сейчас мы живем в будущем, я бы также порекомендовал:
$.ajax()устарел, не использовать в новых проектахXMLHttpRequestустарел, не использовать в новых проектах- принести современный подход, использовать его , если вы можете выбрать
Я использую этот скрипт, чтобы проверить, существует ли файл (также он обрабатывает проблему перекрестного происхождения):
$.ajax(url, {
method: 'GET',
dataType: 'jsonp'
})
.done(function(response) {
// exists code
}).fail(function(response) {
// doesnt exist
})
Обратите внимание, что следующая синтаксическая ошибка выдается, когда проверяемый файл не содержит JSON.
Uncaught SyntaxError: Неожиданный токен <
Функция JavaScript для проверки, существует ли файл:
function doesFileExist(urlToFile)
{
var xhr = new XMLHttpRequest();
xhr.open('HEAD', urlToFile, false);
xhr.send();
if (xhr.status == "404") {
console.log("File doesn't exist");
return false;
} else {
console.log("File exists");
return true;
}
}
Асинхронный вызов, чтобы увидеть, существует ли файл, является лучшим подходом, потому что он не ухудшает взаимодействие с пользователем, ожидая ответа от сервера. Если вы позвоните .open с третьим параметром, установленным в false (как, например, во многих примерах выше) http.open('HEAD', url, false);), это синхронный вызов, и вы получаете предупреждение в консоли браузера.
Лучший подход:
function fetchStatus( address ) {
var client = new XMLHttpRequest();
client.onload = function() {
// in case of network errors this might not give reliable results
returnStatus( this.status );
}
client.open( "HEAD", address, true );
client.send();
}
function returnStatus( status ) {
if ( status === 200 ) {
console.log( 'file exists!' );
}
else {
console.log( 'file does not exist! status: ' + status );
}
}
источник: https://xhr.spec.whatwg.org/
Для клиентского компьютера это может быть достигнуто путем:
try
{
var myObject, f;
myObject = new ActiveXObject("Scripting.FileSystemObject");
f = myObject.GetFile("C:\\img.txt");
f.Move("E:\\jarvis\\Images\\");
}
catch(err)
{
alert("file does not exist")
}
Это моя программа для передачи файла в определенное место и показывает предупреждение, если он не существует
Это адаптация к принятому ответу, но я не смог получить то, что мне нужно, из ответа, и мне пришлось проверить, что это сработало, так как это было предчувствие, поэтому я предлагаю свое решение здесь.
Нам нужно было проверить, существует ли локальный файл, и разрешить открытие файла (PDF), только если он существует. Если вы пропустите URL-адрес веб-сайта, браузер автоматически определит имя хоста, чтобы оно работало на локальном хосте и на сервере:
$.ajax({
url: 'YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf',
type: 'HEAD',
error: function () {
//file not exists
alert('PDF does not exist');
},
success: function () {
//file exists
window.open('YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf', "_blank", "fullscreen=yes");
}
});
Вот мой рабочий Async Pure Javascript с 2020 года
function testFileExists(src, successFunc, failFunc) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === this.DONE) {
if (xhr.status === 200) {
successFunc(xhr);
} else {
failFunc(xhr);
}
}
}
// xhr.error = function() {
// failFunc(xhr);
// }
// xhr.onabort = function() {
// failFunc(xhr);
// }
// xhr.timeout = function() {
// failFunc(xhr);
// }
xhr.timeout = 5000; // TIMEOUT SET TO PREFERENCE (5 SEC)
xhr.open('HEAD', src, true);
xhr.send(null); // VERY IMPORTANT
}
function fileExists(xhr) {
alert("File exists !! Yay !!");
}
function fileNotFound(xhr) {
alert("Cannot find the file, bummer");
}
testFileExists("test.html", fileExists, fileNotFound);
Я не мог заставить его вернуться ни с одним из обратных вызовов прерывания, ошибки или тайм-аута. Каждый из них вернул основной код состояния 0 в приведенном выше тесте, поэтому я удалил их. Вы можете экспериментировать. Я установил тайм-аут на 5 секунд, так как значение по умолчанию кажется слишком большим. С вызовом Async он, похоже, ничего не делает без команды send().
Сначала создает функцию
$.UrlExists = function(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}После использования функции следующим образом
if($.UrlExists("urlimg")){
foto = "img1.jpg";
}else{
foto = "img2.jpg";
}
$('<img>').attr('src',foto);Это не отвечает на вопрос ОП, но для тех, кто возвращает результаты из базы данных: вот простой метод, который я использовал.
Если пользователь не загрузил аватар avatar поле будет NULL, поэтому я бы вставил изображение аватара по умолчанию из img каталог.
function getAvatar(avatar) {
if(avatar == null) {
return '/img/avatar.jpg';
} else {
return '/avi/' + avatar;
}
}
затем
<img src="' + getAvatar(data.user.avatar) + '" alt="">
Что вам нужно сделать, это отправить запрос на сервер, чтобы он сделал проверку, а затем отправить результат обратно к вам.
С каким типом сервера вы пытаетесь установить связь? Возможно, вам придется написать небольшой сервис для ответа на запрос.
Это работает для меня, используйте iframe, чтобы игнорировать браузеры показывают GET сообщение об ошибке
var imgFrame = $('<iframe><img src="' + path + '" /></iframe>');
if ($(imgFrame).find('img').attr('width') > 0) {
// do something
} else {
// do something
}
Я хотел функцию, которая будет возвращать логическое значение, я столкнулся с проблемами, связанными с закрытием и асинхронностью. Я решил так:
checkFileExistence= function (file){
result=false;
jQuery.ajaxSetup({async:false});
$.get(file)
.done(function() {
result=true;
})
.fail(function() {
result=false;
})
jQuery.ajaxSetup({async:true});
return(result);
},
Вы можете использовать эту команду, я использую ее для своего веб-сайта.
if (File("patch").exists)
{
//do jobe when exists
} else {
// do jobe when dosent exist
}
Благодарность