Detecting 404 code in JavaScript

Question

I need to be able to detect a missing image in JavaScript.

PHP on the server can't be used because the href is computed by JavaScript. Script that works when the file exists is:

Data_ID = _DataRow.getDataItem()["Data_ID"];// Picks up the ID of the data
   _HitJPG = document.getElementById("HitJPG");
JPGFileName = _DataRow.getDataItem()["JPGFileName"];
directory = JPGFileName.slice(0, 10);
directory = directory.replace(/-/g, "/");

_HitJPG.innerHTML = "<a href=http://77.88.99.54/data/" + directory + "/" + JPGFileName + " ><h3>JPG File for this Data </h3>" + JPGFileName + "</a>";

How can I detect a HTTP 404 code before I set the "InnerHTML" in the Div?

You could always use jQuery, the `ajax` function in it helps a lot, and sorts cross browser issues. — ArtOfCode, May 17 '14 at 17:04
Do an AJAX request and wait for a response. (You do **not** need jQuery for this simple task.) — ComFreek, May 17 '14 at 17:04

score 3 · Answer 1 · answered May 17 '14 at 17:05

You can use the onload and onerror events to detect wether or not the image can be loaded

var Data_ID     = _DataRow.getDataItem()["Data_ID"];
var _HitJPG     = document.getElementById("HitJPG");
var JPGFileName = _SETIDataRow.getDataItem()["JPGFileName"];//"2014-04-29T13-36-27.JPG"
var directory   = JPGFileName.slice(0, 10);

directory = directory.replace(/-/g, "/");

var image = new Image();

image.onerror = function() {
    // fail - image not available
}

image.onload = function() {
    // success - image available

    _HitJPG.innerHTML = "<a href=http://77.88.99.54/data/" + directory + "/" + JPGFileName + " ><h3>JPG File for this Data </h3>" + JPGFileName + "</a>";
}

image.src = "http://77.88.99.54/data/" + directory + "/" + JPGFileName

score 1 · Answer 2 · edited May 23 '17 at 11:57

You can try this using ajax call as said in above answer. Let me give u the code snippet:

$.ajax({
  url: '<image file name>', // your file name
  success: function(data){
    alert('exists');
  },
  error: function(data){
    alert('does not exist');
  },
})

The above code was already given in stackoverflow for other javascript related questions. You may check that also for clarification.

Test if a file exists with javascript

score 0 · Answer 3 · answered May 17 '14 at 17:14

You can use ajax

var jqxhr = $.ajax( "your iamge url" )
.done(function() {
alert( "success" );
})
.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
})
.always(function() {
alert( "complete" );
});

Reference http://api.jquery.com/jquery.ajax/

score 0 · Answer 4 · answered May 17 '14 at 17:32

You can do it with ajax request, when you get the response from the server, check the response status, example of javascript/jQuery function:

function fileExists(urlToCheck){
    var fileFound = true;
    $.ajax({
       url: urlToCheck,
       type: "GET",
       success: function(data, textStatus, xhr) {
           console.log(xhr.status);
           if(xhr.status == 404) fileFound= false;
       },
       complete: function(xhr, textStatus) {
           console.log(xhr.status);
           if(xhr.status == 404) fileFound= false;
       } 
    });
    return fileFound;
}

I think this function can be improved much more, by considering the different HTTP response codes, codes different from 404 but which doesn't mean that the file exists in the server.

Detecting 404 code in JavaScript

4 Answers4

Linked