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

【问题标题】：Get file path from input in html [duplicate]从html中的输入获取文件路径[重复]
【发布时间】：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

标签： javascript html css

【解决方案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);