Question

首先，出于Chromecast的原因，我现在希望将解决方案限制在Chrome浏览器中。

我想要做的是打包一个图像目录，一个启动器批处理文件（cmd或sh）和一个html文件。 html文件完全是自包含的，没有导入。

bat文件包含如下内容：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files "file://%CD%\SlideShow1.2.html?slideDir=%CD%\Slides"

目前我可以使用

<input type="file" id="slideInput" multiple="multiple" webkitdirectory="webkitdirectory" onchange="appendToSlideList();" accept=".png,.gif,.jpg,.jpeg" />

手动选择文件，

  var slideList = [];
  var numSlides = 0;

  function appendToSlideList()
  {
    var slideInput = document.getElementById("slideInput");
    var slides = slideInput.files;

    for(j = 0; j < slides.length; j++)
    {
      slideList[numSlides++] = slides[j];
    }
  }

将所选目录中的图片附加到主幻灯片列表。然后，通过Timer（）对象显示幻灯片：

  function showNext()
  {
    if(picture == null)
    {
      picture = document.getElementById("slideShow");
      intervalElem = document.getElementById("interval");
    }
    if(currentPicture == numSlides)
    {
      currentPicture = 0;
    }
    // this comes from https://www.w3.org/TR/file-upload/#file
    picture.src = window.URL.createObjectURL(slideList[currentPicture++]);

    var interval = parseInt(intervalElem.value) * 1000;
    timer = new Timer(showNext, interval);
  }

如果你已经读过这篇文章了，那就是kudos :)。所以，所有这些（以及与所需解决方案没有密切关系的其他辅助代码）都可以根据用户输入的对象显示幻灯片。

我的目的是打包，以便用户只需双击bat文件，浏览器就会显示幻灯片。

所以，经过这一切，我的问题是，如何获取传入的目录，并获取该目录中的所有图形文件，以便在已经正常工作的代码中使用。

我花了最后六个小时研究这个问题，很多关于StackOverflow的问题，目前看来，这是一个不可能完成的任务。

以下是“完整”极简主义代码的小提琴：https://jsfiddle.net/hrvrdfjs/

谢谢！

汤姆。

Answer 1

如果用户没有明确选择浏览器中的目录，浏览器中的JavaScript目前无法从目录中列出文件。

但是，您可以轻松地创建一个JavaScript文件，其中包含批处理文件中目录中的图像文件列表，如下所示：

@echo off
echo var toC = ` > "C:\slides\data.js"
dir  C:\slides\*.png,*.gif,*.jpg,*.jpeg  /B >> "C:\slides\data.js"
echo `;  >> C:\slides\data.js

这将创建文件data.js，如下所示：

var toC = ` 
funny.png
serious.png
holidays.jpeg
`;

说明：

echo var toC = ` > "C:\slides\data.js"

使用javascript代码创建或覆盖文件C：\ slides \ data.js，这是创建模板文字的第一部分。

dir  C:\slides\*.png,*.gif,*.jpg,*.jpeg  /B >> "C:\slides\data.js"

告诉dir列出给定目录中具有给定扩展名的文件，并将文件名附加到文件data.js.参数/B使dir只输出文件名，没有其他信息，也跳过输出列表的页眉和页脚。

echo `;  >> C:\slides\data.js

这会附加javascript模板文字的结尾。

在JavaScript ES6及更高版本中，template literals can be used to create string literals that span multiple lines and can contain arbitrary characters。

从html文档中动态加载文件data.js（通过插入引用该文件的脚本标记），您可以访问包含文件列表的变量toC作为多行字符串。

这是一个静态包含data.js文件的演示：

<html>
<head>
<script src="C:\slides\data.js"></script>
</head>
<body>
  <script>
    window.alert(toC);
  </script>
</body>
</html>

Answer 2

我无法使用上面给出的“dir”命令，可能是因为我正在使用Windows 7.这是我想出的，而是：

mkdir C:\Temp\slideShow

rem Replace each instance of a back slash with two, as javascript will remove a single backslash
rem (Unless it is followed by a 'valid' backslash char (r,n,etc.), which is not what we want.).
echo var topLocation = '%CD:\=\\%'; > C:\Temp\slideShow\topLocation.js

echo var slideDirContents = ' > "C:\Temp\slideShow\slideDirContents.js"
dir  %CD%\Slides\*.jpeg %CD%\Slides\*.jpg %CD%\Slides\*.png %CD%\Slides\*.gif   /B /ON >> "C:\Temp\slideShow\slideDirContents.js"
echo ';  >> C:\Temp\slideShow\slideDirContents.js

然后，从输入的.js文件中分离出每个文件，并创建一个文件路径，该文件路径稍后将用于构建img.src可以呈现文件的URL（注意：必须完成add函数）页面加载后，所以textarea元素将出现以供javascript修改）：

  function doOnloadFunctions()
  {
    addStaticsToSlideList();
  }

  function addStaticsToSlideList()
  {
    // Empty dir on Windows == size 2 (CR-LF)
    // Empty dir on others == size 1 (CR or LF)
    if((slideDirContents.length != 2) && (slideDirContents.length != 1))
    {
      var slidelistElem = document.getElementById("slidelist");
      // Linux/Unix/BSD based line separator = \n
      // Windows based line separator = \r\n
      // Mac based line separator = \r
      var re = /\n|\r\n|\r/;
      var slides = slideDirContents.split(re);
      for(j = 0; j < slides.length; j++)
      {
        var aFile = {};
        var theName = slides[j].trim();
        if(theName.length > 0)
        {
          var fileName = slides[j];
          aFile.fileName = topLocation + '\\Slides\\' + fileName;
          // Set the original index to the current insertion point.
          aFile.oi = numSlides;
          // Set the shuffle index simply to instantiate it. We'll
          // set the si for real when we want to shuffle the array.
          aFile.si = 0;

          var listElem = document.createElement("li");
          listElem.appendChild(document.createTextNode(fileName));
          slidelistElem.appendChild(listElem);
          slideList[numSlides++] = aFile;
        }
      }
    }
  }

有一个＆lt; file＆gt;可用于将本地文件附加到幻灯片列表的输入元素，＆lt; file＆gt;输入不填写fileName它只填写name因此这是区分代码，实例化每个＆lt; img＆gt;使用正确的网址：

    if(!(typeof slideList[currentPicture].fileName === 'undefined' || slideList[currentPicture].fileName === null))
    {
      // variable is defined and not null
      picture.src = "file://" + slideList[currentPicture++].fileName;
    }
    else
    {
      // this comes from https://www.w3.org/TR/file-upload/#file
      picture.src = window.URL.createObjectURL(slideList[currentPicture++]);
    }

感谢NineBerry的代码和建议！

如何访问传递给浏览器的URL参数中传递的目录的内容

2 个答案: