[javascript] jQuery 또는 순수 JavaScript에 파일이 있는지 어떻게 확인합니까?

서버의 파일이 jQuery 또는 순수 JavaScript로 존재하는지 어떻게 확인합니까?

답변

jQuery로 :

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
        //file exists
    }
});

편집하다:

다음은 jQuery를 사용하지 않고 404 상태를 확인하는 코드입니다.

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

작은 변경으로 대신 HTTP 상태 코드 200 (성공) 상태를 확인할 수 있습니다.

편집 2 : 동기화 XMLHttpRequest는 더 이상 사용되지 않으므로 다음과 같은 유틸리티 메소드를 추가하여 비 동기화 할 수 있습니다.

function executeIfFileExist(src, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        if (this.readyState === this.DONE) {
            callback()
        }
    }
    xhr.open('HEAD', src)
}

답변

비슷하고 더 최신의 접근법.

$.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()" />

http://wap.w3schools.com/jsref/event_onerror.asp

답변

동일한 도메인 에서 파일을 테스트하는 한 작동합니다.

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);

답변

이 질문에 대한 답변을 실행하려고 할 때 도메인 간 권한 문제가 발생하여 다음과 같이 진행했습니다.

function UrlExists(url) {
$('<img src="'+ url +'">').load(function() {
    return true;
}).bind('error', function() {
    return false;
});
}

그것은 잘 작동하는 것 같습니다, 이것이 누군가를 돕기를 바랍니다!

답변

Babel 트랜스 파일러 또는 Typescript 2를 사용하는 경우 ES7 방식으로 수행하는 방법은 다음과 같습니다.

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