Javascript:验证图像的外部网址 [英] Javascript: Verify External Url Of An Image

问题描述

假设我有一个外部URL(不是来自我的网站)，并且我想验证它以确保此URL是以下文件中的一个:-jpg，jpeg，gif，png，并且它也是正确的图像文件(不是任何脚本)文件或php).另外，如果可能的话:-检查图片的网址是否正常工作.

Suppose i have EXTERNAL URL(not from my website) and i want to verify it to make sure this url is one from these files:- jpg, jpeg, gif, png and also is a correct image file (not any script file or php). Also if this is possible:- Check if the url of the image is working or not.

@ jfriend00好的，所以这就是我想要做的.我制作了html表单，当人们提交它时，它将调用javascript函数，该函数将验证url是否为图像.所以这是我的代码.但这不起作用.请告诉我我应该从这里做什么?

@jfriend00 ok so here is what i'am trying to do. I had maded html form and when people submit it, it will call to a javascript function which will verify if the url is an image. So here is my code. But it's not working. Please tell me what should i do from here?

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

推荐答案

本文中的代码不是我在

Your code in this post is not a correct implementation of the function I gave you in the previous post and will not work for a number of reasons. You cannot return true/false from the onload, onerror handlers. Those are asychronous events and your vrfyImgURL function has already returned.

您真的必须使用我在上一篇帖子中输入的代码 .有用.只需使用它.不要修改它.您传入一个回调，该回调将与验证检查结果一起调用.您必须使用异步编程在调用回调并使用结果的情况下使用它.您不能像尝试那样使用直接顺序编程.是您对我的代码所做的修改使它停止工作.

You really HAVE to use the code I put in that previous post. It works. Just use it. Don't modify it. You pass in a callback and that callback gets called with the validation check results. You have to use asynchronous programming to use this where the callback gets called with the result. You can't use straight sequential programming like you are trying to do. It is your modifications to my code that have made it stop working.

您可以在这里看到我之前给您的代码: http://jsfiddle.net/jfriend00/qKtra/，在示例中，它可以处理来自多个域的图像.它对图像的域不敏感，<img>标签不受域的限制.

You can see the code I gave you previously work here:http://jsfiddle.net/jfriend00/qKtra/ and in the example, it's working with images from a variety of domains. It is not sensitive to the domain of the image and <img> tags are not restricted by domain.

要将其挂接到表单提交中，您可以执行以下操作:

To hook it up to your form submit, you can do this:

<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，在调用回调时结束.

If this were my interface, I would disable the form and put up a note that the image URL is being checked starting when testImage is called and ending when the callback is called.

这篇关于Javascript:验证图像的外部网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！