Fatal编程技术网
  • javascript/
  • 在JavaScript中本地读取外部文件的集合

在JavaScript中本地读取外部文件的集合

javascript browser filesystems

在JavaScript中本地读取外部文件的集合,javascript,browser,xmlhttprequest,filesystems,local,Javascript,Browser,Xmlhttprequest,Filesystems,Local,我正在开发一个需要访问外部文件集合的应用程序。它基本上是一个音乐播放器。它在web服务器下可以正常工作，但我也希望它在浏览器中本地工作 概述： index.htm（带标记的小索引文件，收集外部js、css） index.js（此处所有应用程序代码） dir.js（所有音乐文件的文件路径数组） /AHX/（音乐文件的位置） ahx.js（音乐播放器代码） 这方面的两个主要困难是： JavaScript不能列出目录内容，即使它是子目录。相反，我将文件路径表示为字符串数组 只能使用XMLHttpR

我正在开发一个需要访问外部文件集合的应用程序。它基本上是一个音乐播放器。它在web服务器下可以正常工作，但我也希望它在浏览器中本地工作

概述：

  • index.htm（带标记的小索引文件，收集外部js、css）
  • index.js（此处所有应用程序代码）
  • dir.js（所有音乐文件的文件路径数组）
  • /AHX/（音乐文件的位置）
  • ahx.js（音乐播放器代码）
这方面的两个主要困难是：

  • JavaScript不能列出目录内容，即使它是子目录。相反，我将文件路径表示为字符串数组
  • 只能使用XMLHttpRequest加载外部文件，在本地/脱机运行时，XMLHttpRequest有安全限制，但可以在其他环境下工作（在HTTP或Chrome应用程序下，可能在其他平台下，不确定）
    • 奇怪的是，在最新的Firefox中，2）不再是一个问题
    XMLHttpRequest
    在本地工作，而不禁用
    security.fileuri.strict\u origin\u策略
    。我不确定这是否是标准行为，但Chrome似乎不允许这样做

    在任何情况下，我当前的解决方案都是在.js文件中生成一个文件路径列表（以前我使用了一个需要XHR的txt文件），并使用
    XMLHttpRequest
    加载音乐文件。这当然意味着我需要保持文件夹结构和文件路径数据库同步，使用shell脚本重建dir.js文件

    XHR只应在HTTP上工作，因此该应用程序需要一个web服务器。我希望该应用程序在本地运行（而不仅仅是强制用户安装为Chrome应用程序）。所以我问这个问题是为了找到读取数据的替代方法

    我尝试过的另一种方法是用base64字符串编码所有1000个文件，并将其存储在JS对象中。这将生成一个相当大的8MB.js文件。它的加载速度似乎并不慢，但我假设它的效率并不高。。。此外，更新/维护也是一件痛苦的事情

    localStorage、IndexedDB和Web SQL都是选项，但在应用程序运行之前，无法预先填充存储。也许可以利用文件API一次性设置存储数据库

    那么回到我的问题上来：对于本地访问大量二进制文件（200多个文件，超过6MB等）（即直接打开.html文件），有哪些解决方案

    编辑：，以清除我的用例中的任何混淆。但总的来说，我正在寻找从应用程序本地自动读取这些音乐文件的方法，而不会出现跨源错误。另外，是“js数据库”版本。它将所有1000个文件存储在8MB js文件中，如下所示：

    [{data:"base64-string-of-data-here",path:"original-path-here"}, ...]
    这样，它就不需要XHR了

    Edit2：使用和IndexedDB的解决方案似乎很有希望。无法从多个选定文件夹加载多个文件，但如果目录树已压缩，jszip可以访问所有文件的数组，格式为
    /FOLDER\u HERE/FILE\u HERE
    。然后，可以一次性将路径和二进制数据导入IndexedDB。它在
    文件：//
    URL上也可以正常工作，这一点很重要

    jszip还可以用于有效地构建/更新包含BASE64内容字符串的大型JSON结构，这不需要用户进行任何设置。但仍需要测试。

    不要把这当作一个确定的答案，我也对这个主题感兴趣，如果周围的人不想花时间详细说明答案，请评论，这将比投票更有用

    从我在JavaScript资源中了解到的，考虑到你不能真正绕过问题的安全性方面。即使是开源的，如果没有考虑安全性，也应该明确警告。例如，人们可以分发资源的修改版本。这取决于如何利用这些资源

    如果这是针对一个播放器的，我建议将其作为数据资源，而不是脚本资源，因为安全性（只要您不计算字符串之类的）。JSON数据可以在这里完成这项工作，但需要处理1000个文件。不过，编写一个处理文件的脚本并不难

    HTML5文件API

    我还没有使用它，所以我可以给你一个或两个链接。它的缺点是限制玩家使用最新的浏览器

    （我知道，不是答案）使用库：

    除了在这种情况下，这可能是一个答案，因为javascript中没有真正的通用数据检索。一个好的库会增加这一点，并支持老浏览器

    在这些解决方案中，例如jQueryJSONP允许执行动态跨域GET请求。使用数据格式（而不是脚本），注入更安全。但请记住，您应该详细了解您的播放器对二进制文件做了什么，以及以何种方式可能存在风险

    直接包含脚本：不建议使用

    <script src="./sameFolderFile.js"></script>
    对于包含在本地文件夹结构中的直接脚本，它实际上在本地文件夹中工作。IE说有ActiveX内容并要求获得使用权限，但它在firefox和chrome中都可以使用。可以动态添加标记，但存在很大的安全风险：将执行资源中添加的恶意javascript代码。这可能会给用户带来风险

    不要把这当作一个明确的答案，这个话题我也很感兴趣，如果周围的人不想花时间详细说明答案，请发表评论，这将比投票更有用

    从我在JavaScript资源中了解到的，考虑到你不能真正绕过问题的安全性方面。即使是开源的，如果没有考虑安全性，也应该明确警告。例如，人们可以分发资源的修改版本。这取决于如何利用这些资源