Javascript:验证图像的外部Url

Javascript: Verify External Url Of An Image

本文关键字：外部 Url 图像 验证 Javascript      更新时间：2023-09-26

假设我有EXTERNAL URL（不是来自我的网站），我想验证它，以确保这个URL是这些文件中的一个：.jpg、jpeg、gif、png，也是一个正确的图像文件（不是任何脚本文件或php）。如果可能的话：-检查图像的url是否正常工作。

@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>

您在这篇文章中的代码不是我在上一篇文章中为您提供的函数的正确实现，并且由于多种原因而无法工作。您不能从onload、oneror处理程序返回true/false。这些是异步事件，并且您的vrfyImgURL函数已经返回。

你真的必须使用我在上一篇文章中输入的代码。它有效。只需使用它。不要修改它。您传入一个回调，该回调将被调用并带有验证检查结果。您必须使用异步编程才能在回调得到结果的地方使用它。你不能像你尝试的那样使用直接的顺序编程。是你对我的代码的修改使它停止了工作。

你可以在这里看到我以前给你的工作代码：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时开始检查图像URL，在调用回调时结束。

相关文章：