Javascript：驗證外部網址的圖像

Question

假設我有外部網址（不是來自我的網站），我想驗證它，以確保這個網址是從這些文件中的一個： - jpg，jpeg，gif，png也是一個正確的圖像文件（不是任何腳本文件或PHP）。此外，如果這是可能的： - 檢查圖像的網址是否正常工作。

@ jfriend00好的，所以這裏是我想要做的。我修改了html表單，當用戶提交它時，它會調用一個javascript函數來驗證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，onrorror處理程序返回true/false。這些是異步事件，並且您的vrfyImgURL函數已經返回。

你真的要使用我放在that previous post的代碼。有用。只要使用它。不要修改它。你傳遞一個回調函數，並且這個回調函數會被驗證檢查結果調用。您必須使用異步編程才能將此回調與結果一起調用。你不能像你正在嘗試的那樣使用直接的順序編程。這是你的修改我的代碼，使其停止工作。

你可以看到我以前在這裏工作的代碼：http://jsfiddle.net/jfriend00/qKtra/，在這個例子中，它處理來自各種域的圖像。它對圖像的域不敏感，並且<img>標籤不受域限制。

把它掛到您的表單提交，你可以這樣做：

<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被調用並在調用回調時結束。