获取在 HTML 输入中选择的文件的绝对文件名而不是路径

Question

我正在使用标签标签进行文件输入：

<label for="file" style="cursor: pointer">
    <img src="plus.png"><span id="file-text">Select a file</span>
</label>

一旦用户选择了一个文件，我希望标签的文本更改为所选文件的文件名，而不是路径。

<input type="file" id="file" style="display: none" onchange="document.getElementById('file-text').innerHTML = this.value"/>

谷歌浏览器正在回归

C:\\假路径\\文件名.jpg

Microsoft Edge 正在返回本地文件系统上文件的完整正确路径。

我尝试了拆分功能：

 onchange="var path = this.value.split('\'); document.getElementById('file-text').innerHTML = 'path[path.length-1]'"

但现在它没有返回任何东西。 文字不再改变。 是否可以在内联脚本中完成此操作，或者我必须使用单独的函数？

Answer 1

您可以从<input type="file"/>的files属性访问文件名（它是一个包含所有添加文件的FileList ）。 files[0]将为您提供第一个文件作为File对象。 file.name将为您提供文件名。

 var input = document.getElementById('file'); var label = document.getElementById('file-text'); input.addEventListener('change', function() { if(input.files.length > 0) label.textContent = input.files[0].name; else label.textContent = 'Select a file'; });

 <label for="file" style="cursor: pointer"> <img src="plus.png"><span id="file-text">Select a file</span> </label> <input type="file" id="file" style="display: none"/>

内联版本：

 <label for="file" style="cursor: pointer"> <img src="plus.png"><span id="file-text">Select a file</span> </label> <input type="file" id="file" onchange="document.getElementById('file-text').textContent = this.files.length > 0 ? this.files[0].name : 'Select a file'" style="display: none" />