最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Get absolute file name of the file selected in HTML input instead of path - Stack Overflow

programmeradmin1浏览0评论

I'm using a label tag for file input:

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

Once the user selects a file, I want the text of the label to change to the file name of the selected file, but not the path.

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

Google Chrome is returning

C:\fakepath\filename.jpg

Microsoft Edge is returning the entire correct path of the file on the local file system.

I tried the split function:

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

But now it is not returning anything. The text doesn't change anymore. Would it be possible to acplish this in inline script or I'd have to use a separate function?

I'm using a label tag for file input:

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

Once the user selects a file, I want the text of the label to change to the file name of the selected file, but not the path.

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

Google Chrome is returning

C:\fakepath\filename.jpg

Microsoft Edge is returning the entire correct path of the file on the local file system.

I tried the split function:

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

But now it is not returning anything. The text doesn't change anymore. Would it be possible to acplish this in inline script or I'd have to use a separate function?

Share Improve this question asked Jun 19, 2018 at 2:11 Tanmay VijTanmay Vij 2521 gold badge4 silver badges15 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

You can access the filename from the files attribute of the <input type="file"/> (it is a FileList containing all added files). files[0] will give you the first file as a File object. file.name will get you the filename.

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

Inline version:

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

发布评论

评论列表(0)

  1. 暂无评论