如何让用户使用javascript在本地计算机上选择文件夹(而不是文件)?

时间:2016-01-29 21:39:22

标签: javascript internet-explorer-11 file-handling html5-filesystem

我有一个基于网络的应用程序,我需要能够弹出“文件打开”对话框并让用户选择一个文件夹,然后将其路径填充到HTML表单字段中,以便用户不会不必输入它。

没有上传任何文件或文件夹,只包含路径信息。

客户端平台/环境是带有Internet Explorer 11的Windows 7,或OS X上的Safari(最新版本)。它不能使用Java,Flash或任何其他必须下载和安装的插件 - 只安装了什么默认情况下,在这些平台上,例如Windows上的ActiveX。

我发现这个代码几乎做了我需要的东西 - 但是我无法弄清楚如何让它选择一个文件夹而不仅仅是一个非文件夹文件:

<html>
    <head>
    <script type="text/javascript" language="JavaScript">
    if (typeof String.prototype.startsWith != 'function') {
      // see below for better implementation!
      String.prototype.startsWith = function (str){
        return this.indexOf(str) == 0;
      };
    }

    function getUNCPath() {
        var fileName = document.getElementById("uploadedFile").value;

        var WshNetwork = new ActiveXObject("WScript.Network");
        var Drives = WshNetwork.EnumNetworkDrives();
        for (i = 0; i < Drives.length; i += 2) {
            if (fileName.startsWith(Drives.Item(i))) {
                var fullPath = fileName.replace(Drives.Item(i), Drives.Item(i + 1));
                alert(fullPath);
                break;
            }
        }
    }
    </script>
    </head>
    <body>
        <form onsubmit="getUNCPath()">
            <input type="file" id="uploadedFile"/>
            <input type="submit" value="Get the UNC Path!" />
        </form>
        <span id="uncPath"></span>
    </body>
</html>

我假设我需要使用File API,但是我的Google-fu无法找到通过File API单独检索文件夹名称的方法。

1 个答案:

答案 0 :(得分:0)

出于安全原因,你不能这样做,有些浏览器甚至会给你假的目录信息。浏览器不允许您使用javascript访问和浏览客户端计算机的文件系统。

File API验证此

  

文件名;在获取,这必须返回的名称   文件作为字符串。不同的文件名变体有很多种   系统;这只是文件的名称,没有路径   信息。获取时,如果用户代理无法提供此信息   他们必须返回空字符串。