[RESOLVED]How to check an image url is exist or not using Jquery

Hi friend,

How to check an image url is exist or not using Jquery?

image url like

https://us.dotwconnect.com/suppliers/uploads//10006/11245/Hotel/Images/11774Main.jpg

http://images.gta-travel.com/HH/Images/AA/SYD/SYD-AVI-2.jpg

https://us.dotwconnect.com/poze_hotel/250076-img1-2.jpg

 

regards

sarvesh

Hi,

Try maybe:

http://stackoverflow.com/questions/4715223/ajax-head-request-via-javascript-jquery

It sends a HEAD request which allows to get the same header than with GET but without the file content (speeding up the check). It could also be done server side or depending on what you are doing you should be able to use for example the "error" event on
the img tag when an image fails to load… 

Hi Sarvesh,

Refer this code:

function isUrlExists(url, cb){
    jQuery.ajax({
        url:      url,
        dataType: 'text',
        type:     'GET',
        complete:  function(xhr){
            if(typeof cb === 'function')
               cb.apply(this, [xhr.status]);
        }
    });
}

Checking whether URL exists or not:

Call isUrlExists() by passing URL as parameter.

isUrlExists('URL', function(status){
    if(status === 200){
       // file was found
    }
    else if(status === 404){
       // 404 not found
    }
});

Thanks,

Avishek

Mark as Answer, if it helps you.

You can try with the below code

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script>
    
    function imageExists(url, callback) {
    var img = new Image();
    img.onload = function() { callback(true); };
    img.onerror = function() { callback(false); };
    img.src = url;
  }

  
  function validateImageURL()
    {
        
      var imageUrl = 'http://images.gta-travel.com/HH/Images/AA/SYD/SYD-AVI-2.jpg';
      
      imageExists(imageUrl, function(exists) {
        //Show the result
        alert('Fileexists=' + exists);
      });
      
    }
  </script>
</head>
<body>
<input type="button" value="Validate" onclick="validateImageURL()" />
</body>
</html>

SourceURL

Hello,

when using this code i getting not checking image url 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>

<script language ="javascript" type="text/javascript">
var imageData = Array();
var imageTemp = Array();
imageTemp[0] = ‘https://us.dotwconnect.com/suppliers/uploads//10006/11245/Hotel/Images/11774Main.jpg’;
imageTemp[1] = ‘http://images.gta-travel.com/HH/Images/AA/SYD/SYD-AVI-2.jpg’;
imageTemp[2] = ‘https://us.dotwconnect.com/poze_hotel/250076-img1-2.jpg’;
imageTemp[3] = ‘http://www.hotelbeds.com/giata/16/161781/161781a_hb_l_007.jpg’;
for(var i = 0; i < imageTemp.length; i++){
updateImageData( i );
}

function updateImageData( i )
{
$.ajax({
type: "HEAD",
async: true,
url: imageTemp[i],
success: function(message,text,response){
imageData.push([imageTemp[i], response.getResponseHeader(‘Content-Length’)]);
}
});
}
debugger;
var imagesucessdata = imageData.length;
for (var z = 0; z < imagesucessdata; z++) {
$("#imageurl").html().append(imageData[z])
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<div id="imageurl"></div>

</div>
</form>
</body>
</html>

Hi ,

when using check multiple URL then i am getting late response

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script language ="javascript" type="text/javascript">
debugger;
var imageData = Array();
var imageTemp = Array();
imageTemp[0] = ‘https://us.dotwconnect.com/suppliers/uploads//10006/11245/Hotel/Images/11774Main.jpg’;
imageTemp[1] = ‘http://images.gta-travel.com/HH/Images/AA/SYD/SYD-AVI-2.jpg’;
imageTemp[2] = ‘https://us.dotwconnect.com/poze_hotel/250076-img1-2.jpg’;
imageTemp[3] = ‘http://www.hotelbeds.com/giata/16/161781/161781a_hb_l_007.jpg’;

function imageExists(url, callback) {
var img = new Image();
img.onload = function () { callback(true); };
img.onerror = function () { callback(false); };
img.src = url;
}
for (var i = 0; i < imageTemp.length; i++)
{
imageurlcheck(i);
}

function imageurlcheck(i)
{
imageExists(imageTemp[i], function (exists) {
//Show the result
if (exists == true)
{
imageData.push(imageTemp[i]);
}
//alert(‘Fileexists=’ + exists);
});

}
var imagesucessdata = imageData.length;
for (var z = 0; z < imagesucessdata; z++) {
$("#imageurl").html().append(imageData[z])
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<div id="imageurl"></div>

</div>
</form>
</body>
</html>

Hi sarvesh.mca,

You don’t need to create a array to store the ur,you can simply add the image to your div if the url are valid.

Please try the code below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.js"></script>
    <script language="javascript" type="text/javascript">
 var imageTemp = Array();
 imageTemp[0] = 'https://us.dotwconnect.com/suppliers/uploads//10006/11245/Hotel/Images/11774Main.jpg';
 imageTemp[1] = 'http://images.gta-travel.com/HH/Images/AA/SYD/SYD-AVI-2.jpg';
 imageTemp[2] = 'https://us.dotwconnect.com/poze_hotel/250076-img1-2.jpg';
 imageTemp[3] = 'http://www.hotelbeds.com/giata/16/161781/161781a_hb_l_007.jpg';

 $(function () {
 
    
     for (var i = 0; i < imageTemp.length; i++) {
         imageurlcheck(i);
     }
 })

function imageExists(url, callback) {
 var img = new Image();
 img.onload = function () { callback("true"); };
 img.onerror = function () { callback("false"); };
 img.src = url;
}

function imageurlcheck(i)
{
     var url = imageTemp[i];
 imageExists(url, function (exists) {
     if (exists == "true") {
       
         $("#imageurl").append("<img   src='" + url + "' />");
     }
 });

}

    </script>
</head>
<body>
        <div>
            <div id="imageurl"></div>
        </div>
</body>
</html>

Best Regards,

Kevin Shen.

Hi Kevin,

In my case multiple image URLs are kept in an array. Array can contain valid or invalid URLs. Now a method should able to check all URLs one by one using loop and populate an another array with valid URLs only. Then I want to use latter array which contains
only valid URLs to display these images on page. All these action should happen on click of a link. 

Thanks

Sarvesh

the image exists test is async. you need to wait until all the requests are successful or fail before using the data. you should use query’s promise object to defer calling dependent code until all tests have completed.

 

Hi sarvesh,

You can not use ajax callback to check if the file exist, for you  will need to wait until all the requests are successful or fail before using the data.

So please try the code below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.js"></script>
    <script language="javascript" type="text/javascript">
        var imageTemp = Array();
        var imageData = Array();
 imageTemp[0] = 'https://us.dotwconnect.com/suppliers/uploads//10006/11245/Hotel/Images/11774Main.jpg';
 imageTemp[1] = 'http://images.gta-travel.com/HH/Images/AA/SYD/SYD-AVI-2.jpg';
 imageTemp[2] = 'https://us.dotwconnect.com/poze_hotel/250076-img1-2.jpg';
 imageTemp[3] = 'http://www.hotelbeds.com/giata/16/161781/161781a_hb_l_007.jpg';

 $(function () {
     for (var i = 0; i < imageTemp.length; i++) {
         imageurlcheck(i);
     }

     for (var i = 0; i < imageData.length; i++) {
        var url= imageData[i];
         $("#imageurl").append("<img   src='" + url + "' />");
     }
 })


 function ImageExist(url) {
     var img = new Image();
     img.src = url;   
     if (img.height != 0) {
         return false;
     } else {
         return true ;
     }
         
 }

function imageurlcheck(i)
{
    var url = imageTemp[i];
    var result = ImageExist(url);
    if (result == true) {
        imageData.push(url);
    }

}

    </script>
</head>
<body>
        <div>
            <div id="imageurl"></div>
        </div>
</body>
</html>

Best Regards,

Kevin Shen.

Leave a Reply