Question

我正在开发自己的投资组合网站，该网站基于JavaScript库。该脚本通过跟踪当前位置来显示和预分配图像，并且在仅加载一种文件类型时它非常有用。提取物来了：

var $current = 1;
var $sourceImage = 'path-to-images/'+$current+'.jpg';
var $newImage = new Image();
$newImage.src = $sourceImage;

但是如果在目录中有多个文件类型，例如：1.jpg 2.jpg 3.gif 4.png ...？找到服务器上存在的文件扩展名并将其传递给变量的最佳方法是什么？

感谢您的任何建议。

Answer 1

要检查文件是否存在JavaScript，您必须发送ajax请求：

var req = this.window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    if (!req) {
        throw new Error('XMLHttpRequest not supported');
    }

    // HEAD Results are usually shorter (faster) than GET
    req.open('HEAD', url, false);
    req.send(null);
    if (req.status == 200) {
        console.log('file exists');
    }
    else {
        console.log('file does not exist');
    }

来自phpjs。

Answer 2

仅使用Javascript时，您的解决方案受到限制。最简单的方法是使用包含所有文件名的数组

var imageFiles = ["1.jpg", "2.jpg", "3.gif", "4.png"];

但是，如果有大量图像，这可能是不合需要的。

或者，您可以用PHP（或您选择的任何语言）编写一个页面，该页面将目录中的所有图像作为JSON数组返回。

["1.jpg", "2.jpg", "3.gif", "4.png"]

然后只需使用jQuery这样的框架来请求页面;在这种情况下，getJSON()可以很好地工作。你总是可以重新发明轮子，但我强烈建议使用AJAX框架。

在JavaScript变量中获取不同的图像文件格式

2 个答案: