我正在使用标签标签进行文件输入：
<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"/>
Google Chrome浏览器即将回归
C：\ fakepath \ filename.jpg
Microsoft Edge返回本地文件系统上文件的完整正确路径。
我试过了split函数：
onchange="var path = this.value.split('\'); document.getElementById('file-text').innerHTML = 'path[path.length-1]'"
但是现在它什么也没返回。文本不再更改。是否可以用内联脚本完成此操作，或者我必须使用单独的功能？
您可以从的files属性访问文件名<input type="file"/>（该文件名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" />本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句