Javascript: проверка внешнего URL-адреса изображения - PullRequest
Новая
       9

Javascript: проверка внешнего URL-адреса изображения

0 голосов
/ 18 марта 2012

Предположим, у меня есть ВНЕШНИЙ 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>

1 Ответ

2 голосов
/ 18 марта 2012

Ваш код в этом посте не является правильной реализацией функции, которую я дал вам в предыдущем посте , и не будет работать по ряду причин.Вы не можете вернуть true / false из обработчиков onload, onerror.Это асинхронные события, и ваша 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>

Если бы это был мой интерфейс, я бы отключил форму и поместил бы примечание, что URL изображения проверяется, начиная с вызова testImage и заканчивая при вызове обратного вызова.

...