如何用jQuery获取文件URL？文件夹选择后获取文件路径遇阻求助

Hey there! Let's break down your problem and fix it right up.

首先得明确一个关键的浏览器安全限制：出于隐私保护，浏览器不允许JavaScript获取本地文件的完整绝对路径。你之前的代码只拿到了文件名，但其实根本不需要路径就能解析XML文件——我们可以直接通过浏览器的FileReader API读取文件内容。

问题分析 #

你的代码目前只提取了文件名，没有处理文件内容；而且如果是要选择文件夹下的XML文件，需要给input元素添加对应的属性来支持文件夹选择。

解决方案步骤 #

• 调整文件选择input的属性，支持多选或文件夹选择：
  • 要多选单个文件：添加multiple属性
  • 要选择整个文件夹：添加webkitdirectory（适配Chrome/Edge）和directory（标准属性）
• 用FileReader读取XML文件内容，不需要依赖本地路径
• 筛选出XML格式的文件（通过扩展名判断）

修正后的完整代码 #

<!-- 隐藏的文件选择input -->
<input type="file" id="myInput" style="display:none" multiple webkitdirectory directory>
<!-- 触发选择的按钮/输入框 -->
<input type="text" name="file_path" placeholder="选择文件夹或XML文件">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 点击输入框触发文件选择
$("input[name='file_path']").click(function(){ 
  $("#myInput").trigger('click'); 
}); 

$("#myInput").change(function() { 
  const files = $(this).get(0).files;
  const xmlFiles = [];

  // 筛选XML文件（忽略大小写）
  for (let i = 0; i < files.length; ++i) {
    const file = files[i];
    const extension = file.name.split('.').pop().toLowerCase();
    if(extension === "xml") {
      xmlFiles.push(file);
    }
  }

  // 读取并解析每个XML文件
  xmlFiles.forEach(file => {
    const reader = new FileReader();
    reader.onload = function(e) {
      // 获取XML文本内容
      const xmlContent = e.target.result;
      // 用原生DOMParser解析XML
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlContent, "text/xml");
      
      // 这里写你的XML解析逻辑，比如获取节点内容
      const rootNode = xmlDoc.documentElement;
      console.log(`解析的XML文件：${file.name}，根节点：${rootNode.tagName}`);
    };
    reader.readAsText(file);
  });
});
</script>

关键说明 #

• 为什么不用路径？：浏览器的安全机制禁止暴露本地文件路径，所有文件操作都必须通过File对象和FileReader完成，这是对用户隐私的必要保护。
• 文件夹选择兼容性：webkitdirectory适配Chrome系浏览器，directory是W3C标准属性，两者搭配可覆盖主流浏览器。
• XML解析：原生DOMParser足以完成基础XML解析，若需要复杂操作（比如XPath查询），可以在此基础上扩展。

内容的提问来源于stack exchange，提问作者Ancy