javascript - 查找不带扩展名的图像的 MIME 类型

Question

我正在制作一个小型 Dropbox 图像幻灯片。我使用 Dropbox Public 文件夹共享 index.html 文件，该文件在“img”文件夹中查找一堆图像以创建幻灯片。

我用以下方法做到了这一点，它很hacky但有效

var findFiles = function(slideLimit){
  var limit = slideLimit;
  var img = [];

  for(var i = 1; i < limit; i++){

    var src = "<li class='slide slide-"+i+"'><img src='img/"+i+".png' onerror='imgError(this);''></li>"
    $('.frame ul').append(src);

  }

}

效果很好，但我想提供一个不依赖用户必须使用 .png 的解决方案。

我希望省略扩展程序可以在 Dropbox 上运行，但事实证明不行:

    var src = "<li class='slide slide-"+i+"'><img src='img/"+i+"' onerror='imgError(this);''></li>"

绞尽脑汁，最好是这样

if( mimeType = png)
   i + '.png'
else if (mimeType = gif)
   i + '.gif'
etc

解决方案有点卡住了。有人有什么好主意吗？可能需要我采取不同的不同方向......

Answer 1

最好的方法是让用户告诉您扩展程序

var findFiles = function(slideLimit, ext){
    var limit = slideLimit,
        img = [],
        lis = [];
    ext = ext || "png";   
    for (var i = 1; i < limit; i++) {
        lis.push("<li class='slide slide-"+i+"'><img src='img/"+i+"."+ext+"' onerror='imgError(this);''></li>");
    }
    $('.frame ul').append(lis.join(""));
}

对服务器执行 Ping 操作以查找文件，缺点是需要时间不断访问服务器以查看文件是否存在

var findFiles = function(slideLimit){
    var limit = slideLimit,
        img = [],
        lis = [],
        extList = ["png","gif"];

    function testExt () {
        var ext = extList.shift();
        if (ext) {
            var img = new Image();
            img.onload = function () {
                load(ext);
            };
            img.onerror = testExt;
            img.src="img/1." + ext;
        }
    }

    function load (ext){
        for (var i = 1; i < limit; i++) {
            lis.push("<li class='slide slide-"+i+"'><img src='img/"+i+"."+ext+"' onerror='imgError(this);''></li>");
        }
        $('.frame ul').append(lis.join(""));
    }

    testExt(); 
}

[注意两个代码片段都未经测试，将它们写在编辑器中]