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

이 스크립트를 사용하여 파일이 있는지 확인합니다 (또한 교차 원점 문제를 처리 함).

$.ajax(url, {
       method: 'GET',
       dataType: 'jsonp'
         })
   .done(function(response) { 
        // exists code 
    }).fail(function(response) { 
        // doesnt exist
    })

검사중인 파일에 JSON이 포함되어 있지 않으면 다음 구문 오류가 발생합니다.

잡히지 않은 구문 오류 : 예기치 않은 토큰 <

파일이 존재하는지 확인하기위한 비동기 호출은 서버로부터의 응답을 기다림으로써 사용자 경험을 저하시키지 않기 때문에 더 나은 방법입니다. .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")
}

이 파일은 특정 위치로 파일을 전송하고 존재하지 않는 경우 경고를 표시하는 프로그램입니다.

파일이 있는지 확인하는 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;
    }
}

먼저 함수를 만듭니다

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

이것은 받아 들인 대답에 대한 적응이지만 대답에서 필요한 것을 얻지 못했고 직감으로 작동했는지 테스트해야하므로 솔루션을 여기에 올려 놓았습니다.

로컬 파일이 존재하는지 확인하고 파일 (PDF)이있는 경우에만 파일을 열도록 허용해야했습니다. 웹 사이트의 URL을 생략하면 브라우저가 호스트 이름을 자동으로 결정하여 localhost 및 서버에서 작동하게합니다.

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

    }
});

당신이해야 할 일은 확인을 수행하기 위해 서버에 요청을 보낸 다음 결과를 다시 보냅니다.

어떤 유형의 서버와 통신하려고합니까? 요청에 응답하기 위해 작은 서비스를 작성해야 할 수도 있습니다.

이것은 OP의 질문을 다루지는 않지만 데이터베이스에서 결과를 반환하는 사람에게는 다음과 같습니다. 여기 내가 사용한 간단한 방법이 있습니다.

사용자가 아바타를 업로드하지 않은 경우 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);
},