Is it possible to check for existence of a file from a web page using
javascript? I am trying to come up with a routine that i can call from the
rest of my javascript code that will check if a particular file exists on
disk at the server. ie bool FileExists("
http://myServer.com/File.gif");
Any ideas on how to do this?
As far as I know, there's no way to check if a file exists, but you can
try to load an image and respond appropriately depending on whether or not
it loads successfully, using the onload and onerror events. The only
problem with this is that you'll need to redesign your system to be event
based, rather than load the images in a loop. Depending on what you want
to do, this may or may not be easy. You could try something like:
<html>
<head>
<script type="text/javascript">
// ImageList class - pass a list of URLs,
// call 'get', and then callbacks will be
// called as the loading progresses -
// on_each when each image is successfully loaded,
// on_error if there is an error, and
// on_complete when all images have been loaded.
// Each callback should return 'true' if the next
// URL in the list should be loaded, or false
// if the loading should be aborted.
function ImageList(urls) {
// A list of URLs that have not yet been loaded
this.urls = urls;
// A list of images that have been successfully loaded
this.images = new Array();
// Override these three methods in your own instances
this.on_each = function (url, img) { };
this.on_complete = function () { };
this.on_error = function (url) { };
this.get = function() {
this.get_next_image();
}
this.get_next_image = function() {
var url = this.urls.shift();
if( !url ) {
this.on_complete();
return;
}
var img = new Image();
var il = this;
img.onload = function () {
il.images.push(img);
if( il.on_each(url, img) )
il.get_next_image();
}
img.onerror = img.onabort = function () {
if( il.on_error(url) )
il.get_next_image();
}
img.src = url;
return true;
}
return this;
}
// This will attempt to load four images, but it will fail to load the
// third, and abort at that point.
function test() {
image_urls = [
"
http://images.google.com/intl/en/images/logo.gif",
"
http://images.google.com/intl/en_ALL/images/images_hp.gif",
"
http://test.invalid/no-image-here",
"
http://groups.google.com/groups/img/groups_home.gif"
];
var il = new ImageList(image_urls);
// Override the error callback - returns false,
// so no further images will be loaded
il.on_error = function (url) {
document.write("Error at "+url+"<br>");
return false;
}
// Override the callback for each image load,
// returns true, so the next image will be
// downloaded
il.on_each = function (url, img) {
document.write("Got image from "+img.src +"<br>");
return true;
}
// Override the callback which will be invoked when
// all images have been successfully loaded
il.on_complete = function () {
document.write("Complete<br>");
document.write("Loaded "+il.images.length+" images<br>");
}
il.get();
}
</script>
</head>
<body onload="test()">
</body>
</html>
