Javascript : 이미지의 외부 URL 확인

Question

내 웹 사이트가 아닌 EXTERNAL URL이 있다고 가정하고이 URL이 다음 파일 중 하나임을 확인하기 위해 확인하고 싶습니다. - jpg, jpeg, gif, png 등 정확한 이미지 파일 (모든 스크립트 파일 또는 PHP가 아닙니다). 또한 이것이 가능한 경우 : - 이미지의 URL이 작동하는지 확인하십시오.

@ jfriend00 ok 여기에 내가하려고하는 것이 있습니다. 나는 HTML 폼을 만드는데 사람들이 그것을 제출했을 때 URL이 이미지인지를 확인하는 자바 스크립트 함수를 호출 할 것이다. 그래서 여기에 내 코드가있다. 하지만 작동하지 않습니다. 여기에서 무엇을해야합니까? 이 게시물에

<script type="text/javascript"> 

function vrfyImgURL() { 
var x = document.forms["submitIMGurl"].elements["img_url"].value; 

if(x.match('^http://.*/(.*?).(jpe?g|gif|png)$')){ 

var imgsrc = x; 
var img = new Image(); 

img.onerror = function(){ 
alert("Can't Be Loaded"); 
return false; 
} 
img.onload = function(){ 
alert("Loaded Successfully"); 
return true; 
} 

img.src = imgsrc; 

}else{ 
    alert("It looks like the url that you had provided is not valid! Please only submit correct image file. We only support these extensions:- jpeg, jpg, gif, png."); 
return false; 
} 
} 
</script> 

<form action="http://www.example.com/current_page" enctype='multipart/form-data' method="post" onsubmit="return vrfyImgURL();" name="submitIMGurl"> 
<input type="text" value="http://" name="img_url" /> 
<input type="submit" value="Submit" /> 
</form> 

Answer 1

코드는 내가 the previous post에서 당신을 준 이유에 대해 작동하지 않습니다 함수의 올바른 구현하지 않습니다. onload, onerror 핸들러에서 true/false를 반환 할 수 없습니다. 그것들은 비동기 이벤트이고 귀하의 vrfyImgURL 기능은 이미 반환되었습니다.

정말 코드를 that previous post에 넣어 사용해야합니다. 그것은 작동합니다. 그냥 사용하십시오. 수정하지 마십시오. 콜백을 전달하면 해당 콜백은 유효성 검사 결과와 함께 호출됩니다. 결과를 사용하여 콜백이 호출되는 곳에서 비동기 프로그래밍을 사용해야합니다. 당신은하려고하는 것처럼 연속적인 순차 프로그래밍을 사용할 수 없습니다. 그것은 제 코드를 수정하여 작동을 멈추게합니다.

이전에 내가 준 코드는 http://jsfiddle.net/jfriend00/qKtra/이고이 예에서는 다양한 도메인의 이미지로 작업하고 있습니다. 이미지의 도메인에는 민감하지 않으며 <img> 태그는 도메인에 의해 제한되지 않습니다. 이미지 URL이 때부터 확인되고 있음이 내 인터페이스 인 경우

<form action="http://www.example.com/current_page" enctype='multipart/form-data' method="post" onsubmit="return formSubmit();" name="submitIMGurl"> 
<input type="text" value="http://" name="img_url" /> 
<input type="submit" value="Submit" /> 
</form> 

<script type="text/javascript"> 

function formSubmit() { 
    var url = document.forms["submitIMGurl"].elements["img_url"].value; 
    if (!checkURL(url)) { 
     alert("It looks like the url that you had provided is not valid! Please only submit correct image file. We only support these extensions:- jpeg, jpg, gif, png."); 
     return(false); 
    } 
    testImage(url, function(testURL, result) { 
     if (result == "success") { 
      // you can submit the form now 
      document.forms["submitIMGurl"].submit(); 
     } else if (result == "error") { 
      alert("The image URL does not point to an image or the correct type of image."); 
     } else { 
      alert("The image URL was not reachable. Check that the URL is correct."); 
     } 

    }); 
    return(false); // can't submit the form yet, it will get sumbitted in the callback 
} 

function checkURL(url) { 
    return(url.match(/\.(jpeg|jpg|gif|png)$/) != null); 
} 


function testImage(url, callback, timeout) { 
    timeout = timeout || 5000; 
    var timedOut = false, timer; 
    var img = new Image(); 
    img.onerror = img.onabort = function() { 
     if (!timedOut) { 
      clearTimeout(timer); 
      callback(url, "error"); 
     } 
    }; 
    img.onload = function() { 
     if (!timedOut) { 
      clearTimeout(timer); 
      callback(url, "success"); 
     } 
    }; 
    img.src = url; 
    timer = setTimeout(function() { 
     timedOut = true; 
     callback(url, "timeout"); 
    }, timeout); 
} 

</script> 

, 내가 양식을 사용하지 않도록 설정하고 메모를 넣어 것입니다 :

는이 작업을 수행 할 수 있으며, 제출 양식에를 연결하려면 testImage가 호출되고 콜백이 호출되면 종료됩니다.