Question

我需要能够在JavaScript中检测到丢失的图像。

无法使用服务器上的PHP，因为href是由JavaScript计算的。文件存在时有效的脚本是：

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>";

在Div中设置“InnerHTML”之前，如何检测HTTP 404代码？

Answer 1

您可以使用onload和onerror事件来检测图片是否可以加载

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

Answer 2

您可以使用ajax调用尝试此操作，如上面的答案中所述。让我给你一个代码片段：

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

上面的代码已经在stackoverflow中给出了其他与javascript相关的问题。您也可以检查一下以获得澄清。

Test if a file exists with javascript

Answer 3

您可以使用ajax

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

参考http://api.jquery.com/jquery.ajax/

Answer 4

您可以使用 ajax 请求执行此操作，当您从服务器获得响应时，请检查响应状态， javascript / jQuery 功能：

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;
}

我认为通过考虑不同的HTTP响应代码可以改进这个功能，代码不同于404，但这并不意味着文件存在于服务器中。

在JavaScript中检测404代码

4 个答案: