Javascript 列出从S3存储桶返回的键/URL（HTML5/PHP）

我从AmazonS3存储桶中的目录中获取密钥。其中一些键是经过弹性转码器的视频。键的格式如下所示：

所有者姓名/视频/野生动植物保护区123abcABC/HLS\U 1M\uU.m3u8

所有者姓名/视频/野生动物保护区123abcABC/HLS 2M.m3u8

所有者姓名/视频/野生动植物保护区123abcABC/HLS\U 400K\uU.m3u8

所有者名称/视频/野生动物\u 123abcABC/123abcABC.mp4

OwnerName/image/someImage.png

我想要做的是使用Javascript和使用li的HTML在网页上显示键。最终，我希望它看起来像这样：

OwnerName
|-->video
|------>Wildlife_123abcABC
|---------->HLS_1M_.m3u8
|---------->HLS_2M_.m3u8
|---------->HLS_400K.m3u8
|---------->123abcABC.mp4
|-->image
|------>someImage.png

就我的代码而言，这就是它当前的样子：

function displayURL(url, fileName){
    var filePath  = fileName.split("/");
    var type      = filePath[1];
    content       = fileName.split(".");
    var ext       = content[content.length - 1];

    var li        = [];
    var a         = [];

    //var li          = document.createElement('li');
    //var a           = document.createElement('a');

    for(var i = 0; i < filePath.length; i++){
        li[i] = document.createElement('li');
        a[i] = document.createElement('a');

        li[i].className  = "file";
        li[i].id = filePath[i];
        //a[i].href       = url;
        a[i].innerHTML = filePath[i]+"</br>";
        li[i].appendChild(a[i]);
    }

    //li.className  = "file";
    //a.href      = url;
    //a.innerHTML = fileName+"</br>";
    //a.innerHTML   = url+"</br>";
    //li.appendChild(a);

    switch(type){
        case 'image':
            var img = document.createElement("img");
            img.src = url;
            img.width = 100;
            img.height = 100;
            li.appendChild(img);

            _("url_image").appendChild(li);
            break;
        case 'video':
            if((ext != "ts") && (ext != "png"))
                for(var j = 0; j < filePath.length; j++){
                    if(j === 0)
                        _("url_video").appendChild(li[j]);
                    else
                        li[j-1].appendChild(li[j]);
                }
            break;
        default:
            _("url_other").appendChild(li);
            break;
    }
}

函数displayURL（url，文件名）{
var filePath=fileName.split（“/”）；
var type=filePath[1]；
content=fileName.split（“.”）；
var ext=内容[content.length-1]；
var li=[]；
var a=[]；
//var li=document.createElement（'li'）；
//var a=document.createElement（'a'）；
对于（var i=0；i”；
李[i].儿童（a[i]）；
}
//li.className=“文件”；
//a、 href=url；
//a、 innerHTML=fileName+“
”；
//a、 innerHTML=url+“
”；
//李.儿童（a）；
开关（类型）{
案例“图像”：
var img=document.createElement（“img”）；
img.src=url；
img.width=100；
img.高度=100；
李.儿童（img）；
_（“url_图像”）。追加子项（li）；
打破
案例“视频”：
如果（（外部！=“ts”）&&（外部！=“png”））
对于（var j=0；j

到目前为止，我只专注于让视频部分发挥作用

杰里

录像带

野生动物

HLS_1M_.m3u8

杰里

录像带

野生动物

HLS_2M_.m3u8

杰里

录像带

野生动物

HLS_400K_.m3u8

杰里

录像带

野生动物

eaQUuiN7aBKzAfC.mp4

杰里

录像带

超级卡塔8QBSUNQW5WLQF

HLS_1M_.m3u8

杰里

录像带

超级卡塔8QBSUNQW5WLQF

HLS_2M_.m3u8

杰里

录像带

超级卡塔8QBSUNQW5WLQF

HLS_400K_.m3u8

杰里

录像带

超级卡塔8QBSUNQW5WLQF

Ta8QbSUnQW5WlqF.mp4

---

你好。您的实际输出已添加到我的当前输出。