0

I'm trying to load an image to a div background using the following file structure in the root.

WebContent --
            |
            zharaimages --
                         |
                         [ItemID] --
                                   |
                                   Image.jpg

This is done by jQuery and the file structure is inside the root. The ItemID folder is dynamic and I have to check whether the path exists using jQuery and if the path is not valid, I should go to a default path to fetch the default image. How can I check the path is valid using jQuery. I'm hoping to this can be done without an ajax call.

Can any one help me on a tutorial or an API I can use for this!

UPDATE

The files are on the server. The concept I have is that I have 100s of item elements & I want to load an image for each item element. The images are saved in the server ( a local host ) and the folder hierarchy is divided using the item ID as shown. What I want to do is check whether the image file exists before appending it to the background of the item element div. Is this possible. This is a web application developed using spring.

Jayram
  • 18,820
  • 6
  • 51
  • 68
Imesh Chandrasiri
  • 5,558
  • 15
  • 60
  • 103
  • Only the server knows whether the path is valid so how do you think the client script (jQuery) can check this without asking the server (via ajax)? – Bergi Jun 28 '13 at 04:00
  • What determines the ItemID? Actually I think the whole task is serverside and should not be done with jQuery. Or can you please show us how you're currently using jQuery? – Bergi Jun 28 '13 at 04:02
  • I'm currently using jQuery to post ajax calls to get responses from the backend. Mostly item details and stuff. I'm not using ajax calls to retrieve image files. – Imesh Chandrasiri Jun 28 '13 at 04:11
  • 1
    i hope this post will answer your question http://stackoverflow.com/questions/3381663/check-if-image-exists-with-given-url-using-jquery – muneebShabbir Jun 28 '13 at 04:18
  • 1
    Well then just make the backend include the availability of the image in the sent item details. – Bergi Jun 28 '13 at 04:27
  • I'm using java file to check if the path exists and return the paths so that I can load the images – Imesh Chandrasiri Jun 28 '13 at 04:38
  • 1
    @Dimal: Good! If you have further problems, please post that Java code – Bergi Jun 30 '13 at 12:27

2 Answers2

1

In simple way you cannot. It is because JavaScript cannot access folders on server side. The only way you could try to check is to invoke $.get in which you pass url to image and handle error if image does not exist. You cannot try to get only folder because if folder listing is disabled you will always get error

Piotr Stapp
  • 19,392
  • 11
  • 68
  • 116
1

you can bind error handler on your image tag, and if error receive you can load your default image.

$('#imgElementID').error(function() {
   $(this).attr('src', 'images/DEFAULT.JPG');
});

without hitting URL you cannot get to know if image exist or not

muneebShabbir
  • 2,500
  • 4
  • 29
  • 46