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"/>

Google Chrome正在返回

C：\ fakepath \ filename.jpg

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

我尝试了分割功能：

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

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

Answer 1

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

＆＃13;

files[0]

＆＃13;

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';
});

＆＃13;

内联版本：

＆＃13;

<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"/>

＆＃13;

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

1 个答案: