【问题标题】:Directory Chooser in HTML pageHTML 页面中的目录选择器
【发布时间】:2011-02-18 01:50:17
【问题描述】:

如何在 html 页面中创建目录选择器。
如果我使用输入文件元素,我只能选择文件,但我需要选择目录。
我需要这样做,因为用户应该在他的计算机中选择正确的路径。
有什么解决办法吗?

【问题讨论】:

标签: html directory


【解决方案1】:

试试这个,我想它对你有用:

<input type="file" webkitdirectory directory multiple/>

你可以在https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3找到这个演示, 如果您需要更多信息,您可以找到它 here.

【讨论】:

  • 我的印象是您的建议适用于上传文件夹,而不是获取其路径。
  • developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/… 用于文档。它被称为non-standard。它有效地上传递归包含的文件(?),还公开文件夹名称。这适用于大多数情况
  • @SamithaChathuranga 现在可以在 Chrome 中使用,至少从 65 版开始
【解决方案2】:

出于安全原因,不能在纯 HTML/JavaScript 中完成。

选择要上传的文件是您能做的最好的事情,即使那样您也不会在现代浏览器中获得其完整的原始路径。

您也许可以使用 Java 或 Flash 将一些东西放在一起(例如,使用 SWFUpload 作为基础),但它需要大量工作并带来额外的兼容性问题。

另一个想法是打开一个iframe 显示用户的C: 驱动器(或其他),但即使现在可以这样做(出于安全原因可能会被阻止,很长时间没有尝试过),这也是不可能的让您的网站与 iframe 通信(再次出于安全原因)。

你需要这个做什么?

【讨论】:

  • 我需要它来选择计算机内部的路径,而不是上传。我使用这个路径来保存文件,但是带有 JSP 功能。
  • @enfix 你打算如何将文件从 JSP 服务器保存到用户本地计算机上的某个路径中?我不明白。您可以编辑您的问题以澄清吗?
  • 我需要获取用户想要保存文件的路径,但是文件是用 JSP 页面内的 java 函数 callend 保存的。这个函数需要一个保存文件的路径。就这样。我保存了多个文件,我需要用这个 java 函数创建文件夹和其他东西。
  • @enfix 您无法从服务器将文件保存在客户端计算机上。这是完全不可能的。您必须将文件作为常规文件下载提供,然后浏览器将让用户选择保存文件的目录。不过,这完全超出了您的控制范围。你不能影响过程的那一部分。
  • @Pekka웃 他需要什么有什么关系
【解决方案3】:

如果您是服务器和用户(例如,您正在创建一个通过浏览器运行的应用程序并且您需要选择一个文件夹),那么当在浏览器中单击某个按钮时尝试从服务器调用JFileChooser

JFileChooser chooser = new JFileChooser();
chooser.setCurrentDirectory(new java.io.File("."));
chooser.setDialogTitle("select folder");
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
chooser.setAcceptAllFileFilterUsed(false);

这段代码来自here

【讨论】:

    【解决方案4】:

    脚本是不可避免的。

    由于存在安全风险,未提供此信息。 &lt;input type='file' /&gt; 最接近,但不是您要找的。​​p>

    结帐this example 使用 Javascript 来实现您想要的。

    如果操作系统是windows,可以使用VB scripts访问核心控制文件浏览文件夹。

    【讨论】:

      【解决方案5】:

      我做了一个解决方法。我有一个隐藏的文本框来保存值。然后,在 form_onsubmit 上, 我将路径值(减去文件名)复制到了隐藏文件夹。然后,将文件输入框设置为“”。这样,就不会上传任何文件。 我不记得 fileUpload 控件的事件。也许在改变。有一阵子了。如果有值,我会解析文件名并将文件夹放回盒子。当然,您会验证该文件是否为有效文件。 这将为您提供客户端工作站文件夹。
      但是,如果您想反映服务器路径,则需要完全不同的编码方法。

      【讨论】:

      • 用户必须接受培训才能选择任何文件。太牛了。但是,在紧要关头工作。将 onchange="parseFilePath()" 添加到 FileUpload 控件。函数 parseFileUploadPath() { var upl = document.getElementById(""); if (upl.value != "") { var pos = upl.value.lastIndexOf("\\") document.getElementById("").value = upl.value.substr (0,pos) } }
      • 抱歉,HTML 更完整。
      【解决方案6】:

      截至 2022 年,现在有一个目录选择器 API:

      https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker

      async function getDir() {
        const dirHandle = await window.showDirectoryPicker();
      
        // run code for dirHandle
      }
      

      【讨论】:

        【解决方案7】:

        如果您没有太多文件夹,那么我建议您使用 if 语句根据用户输入的详细信息选择上传文件夹。 例如

        String user= request.getParameter("username");
        if (user=="Alfred"){
        //Path A;
        }
        if (user=="other"){
        //Path B;
        }
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2013-11-27
          • 1970-01-01
          • 1970-01-01
          • 2012-07-18
          • 2019-04-08
          • 1970-01-01
          • 2015-01-09
          相关资源
          最近更新 更多