how to check image exist or not in my local system using ajax

Question

We have image in D:\img\need.png. We need to know image exist or not.We tried like this:-- It's call error method always

$.ajax({
        url:'http://www.himansuit.com//modiyojana.jpg',
        type:'HEAD',
        error: function(jqXHR, textStatus, errorThrown)
        {
            alert("file does not exist");
            console.log(textStatus); 
             console.log(jqXHR); 
             console.log(errorThrown); 
        },
        success: function()
        {
            alert("file exists do something here");//file exists do something here
        }
    });

Please guide me .What wrong in my code .How check file exist or not in my system using ajax call

We got Error this enter image description here

You can not access to the local filesystem from a javascript code hosted in a web page. — Gaël Barbin, Apr 08 '15 at 05:28
You will have to set up a web server and a script which then will check if a file exists and will return true or false to your script. — Gaël Barbin, Apr 08 '15 at 05:29
@Gael thanks for Reply but no need access jest checking file exist or not .First tell me it's possible or not .Please guide me — Pavan Alapati, Apr 08 '15 at 05:30
that is the same problem to check if a file exists or accessing it — Gaël Barbin, Apr 08 '15 at 05:32
I believe the only way (or the only way I know how) to do this would be to post the file url to the server and have the server check and report back. — Zac Smith, Apr 08 '15 at 05:36
Which server side script do you use ? If php we can check it in server end. — krishna, Apr 08 '15 at 05:39
@krishna Please look my code once .We placed image into Server but it's always come file don't exits.but file this exist in url http://www.himansuit.com//modiyojana.jpg — Pavan Alapati, Apr 08 '15 at 05:40
@Gael Please look my code once .We placed image into Server but it's always come file don't exits.but file this exist in url himansuit.com//modiyojana.jpg — Pavan Alapati, Apr 08 '15 at 05:41
can you tell what error message is returned? If you want to check if a file exists at a given URL, you will have to have the autorisation for that: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing — Gaël Barbin, Apr 08 '15 at 05:43
That is indeed a CORS access restriction. You can not do that with an ajax script due to security considerations. — Gaël Barbin, Apr 08 '15 at 05:56
If you want to just check if an image exists, see answers of this question: http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript — Gaël Barbin, Apr 08 '15 at 05:57

krishna · Answer 1 · 2015-04-08T05:49:08.870

1

In server side use script like this.

<?php $filename = '/path/to/foo.txt';    if (file_exists($filename)) {echo "1";//existed
}else {    echo "0";//not}?>

In front end script do ,

$.ajax({
    url:'checkfileexists.php',
    type:'post',
    error: function(jqXHR, textStatus, errorThrown)
    {
        alert("file does not exist");
        console.log(textStatus); 
         console.log(jqXHR); 
         console.log(errorThrown); 
    },
    success: function(data)
    {
      if(data==1)
        alert("file exists do something here");//file exists do something 
      else
       alert("not");  
    }
});

edited Apr 08 '15 at 05:49

answered Apr 08 '15 at 05:44

krishna

134
1
1
13

thanks for Reply .We Placed image in server like this http://www.himansuit.com//modiyojana.jpg now We need check image is exist or not we don't about PHP – Pavan Alapati Apr 08 '15 at 05:50

Gaël Barbin · Answer 2 · 2015-04-08T06:07:00.867

As told in comments, you first have to set up a web server on your local OS. For example Apache, or even a node web server. Installation depends on your system.

Then, you have to write a script which receives a file path and check if there is a file here.

So, your ajax call will looks like that:

$.ajax({
        url: 'http://localhost/script_path/script.php' //or script.js, or...
             +'?path=D:/img/need.png',
        type:'GET',
        error: function(jqXHR, textStatus, errorThrown)
        {
             console.log(textStatus); 
             console.log(jqXHR); 
             console.log(errorThrown); 
        },
        success: function( response )
        { 
           if( response )
              alert("file exists do something here");//file exists do something here
           else
              alert("file does not exist");
        }
    });

edit

To check if a file exists, hosted on a different domain, without having a CORS restriction:

function checkFileExists( url ){
  
  var img= document.createElement('img');
  img.style.display= "none";
  img.onload= function(){ alert( url + " exists")};
  img.onerror= function(){ alert( url + " does not exists")};

  img.src= url;
}

checkFileExists("http://www.himansuit.com/modiyojana.jpg");
checkFileExists("http://www.fakedomain.com/modiyojana.jpg");

how to check image exist or not in my local system using ajax

2 Answers2