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被调用并在调用回调时结束。