Me Again... Keywords: Javascript, File Exist

rolandatem · November 15th, 2004, 03:07 PM

Ok, Im in the middle of creating a rollover image function (blah blah), but its dependant on the name of the image. Such as if an item # is: 93905 then the image would be something like 93905.jpg.

What I'm wondering is, is there is a way to check if the file exists on the server... I've tried a couple of methods that I've found and they did not work. One attempt was:

    var sFileName = "http://www.fakepage.com/image/rollover/" + cleanString(productId, "+-./\\") + ".jpg";
    var oFso = new ActiveXObject("Scripting.FileSystemObject");
    if (oFso.fileExists(sFileName))
    {
        document.getElementById(hidVarValue).src = imageFile;
    }
    else
    {
        document.getElementById(hidVarValue).src = "http://www.fakepage.com/images/rollover/empty.jpg";
    }
    document.getElementById(hidVarValue + "link").href = infoLink;

This gave me an error in trying to create the oFso object with the "new ActiveXObject" call.

All I want to do is to know if the file exists, so that I may replace it with another image called empty.jpg to avoid having that annoying [X] image replacement when file is non-existant.

Snib · November 15th, 2004, 11:02 PM

You cannot use JavaScript to perform tasks on the server. JavaScript is client-side ONLY (unless you use it in ASP).

I would use PHP, ASP, CGI or some other server language to perform this task.

-Snib
Where will you be in 100 years?
Try new FreshView 0.2!

joefawcett · November 16th, 2004, 04:47 AM

This might give you some ideas (don't use with animated gifs etc.):

Code:

<html>
<head>
<title>Image Exists</title>
<script type="text/jscript">
  function doesImageExist(path)
  {
    var oImg = new Image();
    oImg.onload = function(){onImageEvent(oImg, true);};
    oImg.onerror = function(){onImageEvent(null, false)};
    oImg.src = path;    
  }

  function onImageEvent(img, loaded)
  {
    if (loaded)
    {
      alert("Width: " + img.width + "\nHeight: " + img.height);    
    }
    else
    {
      alert("Failed");    
    }
  }


</script>
</head>

<body bgcolor="#FFFFFF">
Enter path to image and press test. (Use / as path separator.) 
<input type="text" size="50" id="txtImagePath">&nbsp;<input type="button" value="Test" onclick="doesImageExist(txtImagePath.value);">
</body>
</html>

--

Joe (Microsoft MVP - XML)

rolandatem · November 16th, 2004, 04:46 PM

see thats the thing Snib, Im used to using ASP bleh...

Anyway, the site that I was working with doesnt allow scripting, the company that Im working for at the moment, decided to use a websolution called flashecom, so what I was trying to do was to over-ride things with javascript.

Anywho, I figured out a way to get around this issue. I decided to use the onerror event handler through the image object to call a function that placed a default image called empty.jpg (1x1px). It seemed to work when the image is not found XD

Thanks guys for the info!