从html中的输入获取文件路径[重复]

Posted 2023-05-07

【中文标题】从html中的输入获取文件路径[重复]

【英文标题】：Get file path from input in html [duplicate]

【发布时间】：2020-01-19 09:50:23

【问题描述】：

我喜欢输入文件：

<input type="text" id="txtPath" placeholder="No file selected" />
<input id="btnBrowse" type="button"  value="Browse..." onclick="document.getElementById('file').click();" />
<input type="file" id="loadFile" style="display:none;" id="file" name="file" />

我想提醒选择的路径，我试过这样：

document.getElementById("loadFile").addEventListener("change", function(event) 
  let output = document.getElementById("txtPath");
  let files = event.target.files;
alert(files);
,false);

但这不起作用，错误：

无法读取 null 的属性“点击”

【问题讨论】：

详细解释这个不行

能给出更准确的描述，什么不行？

您的文件选择器定义了两个 id 属性。 id="loadFile" 和 id="file"。我怀疑这会导致onclick="document.getElementById('file').click();" 失败。

@Kei 你是对的！ 小程见example

【参考方案1】：

您有重复的id 输入：

id="loadFile" style="display:none;" id="文件"

<input type="text" id="txtPath" placeholder="No file selected" />
<input id="btnBrowse" type="button"  value="Browse..." onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" />

世界示例jsfiddle

【讨论】：

你好，它不会提醒文件名，你测试过jsFiddle链接吗？

对于警报文件名 let output = document.getElementById("txtPath"); let files = event.target.files; alert(files[0].name) ,false);