JavaScript - 从文件夹扫描和创建链接文件答案

【问题标题】：JavaScript - Scan and create link files from a folderJavaScript - 从文件夹扫描和创建链接文件
【发布时间】：2018-01-03 15:49:07
【问题描述】：

我创建了一堆本地 HTML 文件，我正在尝试翻译它们，这要归功于 xml 文件和大量 JavaScript/JQuery。翻译部分已经完成，我现在正在尝试使用所有 xml 文件做一个下拉菜单来选择所需的语言。

首先，我尝试扫描一个名为“images”的本地文件夹，并在一个空白的 html 页面中打印我的文件名，但我无法做到。我对堆栈溢出和forum.jquery.com 进行了大量研究，但即使我尝试了很多东西，也没有任何效果。

这是我暂时提取的内容：

HTML 方面：

<body>
    <div id="fileNames">
        <p></p>
    </div>
    <script>window.onload=ChangeLangue</script>
</body>

JS/Jquery 端：

var folder = "images/";
$.ajax({
    url: folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if (val.match(/\.(jpe?g|png|gif)$/)) {
                $("body").append("<img src='" + folder + val + "'>");
            }
        });
    }
});

我做错了什么？这可能吗？

【问题讨论】：

当您说“本地”时，您是指在客户端计算机上吗？如果是这样，那是不可能的。浏览器安全性阻止了对本地文件系统的访问 - 这是有充分理由的。
我的意思是在我自己的电脑上，而不是在网络上。
还是一样。浏览器不允许 JS 访问本地文件系统。如果是这样，我已经可以访问您计算机上的所有文件；）
该死 :( 感谢您的快速回答！
您可以使用文件类型的输入，但这需要用户交互，例如单击

标签： javascript jquery html

【解决方案1】：

浏览器不允许跨源请求。将抛出一个错误 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.因为协议是file://

你可以通过设置一个标志来做到这一点：

退出 Chrome。
使用以下命令重启。

MAC：在终端，open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

WINDOWS：运行中，C:/PATH_TO_CHROME_INSTALLATION_FOLDER/chrome.exe --allow-file-access-from-files

现在您可以从您的计算机访问这些文件。要验证它，你可以去chrome://version，你可以看到flag在Command Line部分下启用。

由于你有var folder="images/"，假设浏览器中加载的页面在/Users/Default/Desktop文件夹中，那么发出的ajax请求将是

file:///Users/Default/Desktop/images

如果在文件夹var folder = "/images/" 之前添加/，请求将是file:///images/。

确保提供所需/完整的路径。

得到响应后，由于响应是html格式，可以使用document.write(response)。从那里您可以查看和导航进/出文件夹。

我尝试了下面的 JS 代码并得到了结果。

<script type="application/javascript">
    var url = "/Users/Default/Downloads";
    var req = new XMLHttpRequest();
    req.open("GET",url,true);
    req.onreadystatechange=function(){
        if(req.readyState === 4)
        {
            document.write(req.responseText);
        }
    };
    req.send();
</script>

附： : 不知道它是否适用于 Windows 机器。如果我错了，请纠正我。 TIA。

【讨论】：

你解释的问题正是发生了什么。我尝试了您的解决方案，但该命令似乎不适用于 Windows。感谢您的帮助，我会找到另一种方法来做到这一点！
退出所有 chrome 实例，转到运行并执行命令 - chrome.exe --allow-file-access-from-file。这行得通，我想是的。未经测试只是谷歌搜索。
是的，我试过了，但我得到了同样的错误（“跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。”）。似乎在 windows 上使用 firefox 并没有出现这个错误，因为我在 firefox 上使用的所有 HTML 页面都可以正常工作，但不能在 Chrome 上正常工作（我从一开始就使用 firefox）。您的 JS 是一个好的开始，我将继续使用它。感谢您的帮助