JavaScript 中的打开文件对话框

• 下载演示项目 - 2 Kb

引言

你是否曾经需要灵活地处理 JavaScript 元素需要处理的数据？这是我的解决方案。我的问题是，我需要一个 JavaScript 以人类可读的方式呈现特定类型的 XML 文件的内容，并且这些数据可以驻留在不同的文件中，因此名称是可变的。（对于那些感兴趣的人，它是关于以一种称为“gpx”的特定 XML 变体保存的 GPS 数据的呈现。）我想用单个 JavaScript 元素处理所有这些文件，而无需为每个新文件编辑源代码。当然，你可以提示用户输入文件名，但这可能会变得相当笨拙，例如，当它位于一个很远的文件夹中时。我真正需要的是普通的打开文件对话框，但由于我不知道如何从 JavaScript 中实现这一点，我尝试自己构建一个。幸运的是，我偶然发现了 AFShin Dehghani 关于在目录中查找文件的文章。我将他的想法扩展到我的解决方案中。

背景

该解决方案基于两件事。首先是使用 ActiveX 对象 FileSystemObject，它包含用于创建特定文件夹中的文件和子文件夹列表的方法。其次是可以使用 DOM 元素 location.href 将参数传递到 JavaScript 中，它为您提供调用它的原始 URL 引用。

请注意，您必须允许 Internet Explorer 中的 ActiveX 才能执行此代码。在 Mozilla 中，您需要一个特殊的插件。

使用代码

让我们首先看一下 OpenDialog.htm 中的代码。每次您点击“显示内容”按钮时，都会调用函数 Scan 以生成包含在输入字段 path 中的文件夹中的子文件夹和文件列表。

函数 FindFolder 构建子文件夹列表。（很抱歉我无法在此处显示源代码，即使包含在 <pre> 标签中，浏览器也会把它弄乱；您必须返回到演示。）它为每个子文件夹创建一行，其中文件夹名称包含在 HTML 输入字段中，该字段具有特定的 onClick 行为：单击时，文件夹名称将连接到 path 字段。请注意需要使用多少个反斜杠才能在输出中获得单个反斜杠作为路径分隔符。

函数 FindFile 构建文件列表。我曾经在这里使用名称扩展名进行过滤，但在演示中已注释掉。现在它创建一个文件列表，其中每个文件名都包含在特定的 <a> 元素中，从而给出目标 JavaScript 元素的 URL（在演示中称为“Destination.htm”）。文件名位于“href”属性中，并用问号与目标文件分隔开。当您单击浏览器中显示的文件名超链接时，这会使其成为传递到目标 JavaScript 中的参数。

在 Destination.htm 中，以下代码段至关重要

function showFileName() {
   var e = document.getElementById("fileInfo");
   var UrlParameter = location.href.split("?");
   var StrOut = new String();
   var fileName = new String();
   if (UrlParameter[1]) {
      fileName = UrlParameter[1];

它显示了一个名为 UrlParameter 的数组的创建，其中填充了 URL 的完整内容（如 Internet Explorer 的地址栏中所示）。此内容由问号字符分割，并分配到后续数组元素中。所选文件的名称直接位于问号后面，因此它最终出现在第二个数组元素中，可以从那里使用它。在此示例中，它仅显示在浏览器中，但想到其他用途并不难。在我的应用程序中，XML 数据是从文件中加载并解释以显示在浏览器中的。

关注点

我在 path 变量中使用反斜杠字符作为分隔符时遇到了一些问题，因为它在 JavaScript 中充当转义字符，告诉解释器后面的字符必须按字面意义理解，并且没有特殊功能。因此，为了输出一个反斜杠，您必须输入两个：第一个告诉解释器第二个必须输出。当我尝试这样做时，什么也没有出现。这让我困惑了一段时间，直到我意识到输出本身是一小段脚本：必须在 onClick 事件上采取的操作。因此，该输出又必须包含两个斜杠才能在变量中产生一个。因此，您需要在生成所有这些内容的语句中放置四个斜杠。（在我的源代码中，您甚至可以看到五个，因为随后的引号也必须在输出中。）

历史

• 这是第一个版本，日期为 2004 年 8 月 24 日。