html - Get filename from input file in Javascript - Stack Overflow

admin管理员组

文章数量:1389758

I have noticed that bootstrap is able to parse out and display the top level filename from a file input field when the user selects a file.

<input type="file" id="exampleFile">

JSFiddle: /

My question: Is this functionality exposed for me to use in my own javascript code? Or do I have to parse out the filename once again using my own technique?

I have tried retrieving the filename like so:

$('#exampleFile').val()
// Resolves to 'C:\fakepath\FILENAME' instead of 'FILENAME'

I have noticed that bootstrap is able to parse out and display the top level filename from a file input field when the user selects a file.

<input type="file" id="exampleFile">

JSFiddle: http://jsfiddle/na4j7n6y/

My question: Is this functionality exposed for me to use in my own javascript code? Or do I have to parse out the filename once again using my own technique?

I have tried retrieving the filename like so:

$('#exampleFile').val()
// Resolves to 'C:\fakepath\FILENAME' instead of 'FILENAME'

• javascript
• html
• regex
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Jun 19, 2017 at 22:42 Felipe Oriani 38.6k1919 gold badges138138 silver badges201201 bronze badges asked Mar 17, 2015 at 19:07 hofan41hofan41 1,46811 gold badge1111 silver badges2525 bronze badges 5

• I'm not sure what you are asking. Are you wanting to know what Bootstrap.js object holds the name of the file, so you can reference it? in HTML? in Javascript? in PHP? etc – Kirk Powell Commented Mar 17, 2015 at 19:10
• In javascript, I would like to be able to reference the filename of the user selected file. – hofan41 Commented Mar 17, 2015 at 19:11
• I believe the DOM would have an object element that holds the value as displayed. You could use your own JS to reference that element. – Kirk Powell Commented Mar 17, 2015 at 19:13
• I don't see how I could retrieve it. Could you provide a fiddle? – hofan41 Commented Mar 17, 2015 at 19:17
• My bad, looks like this feature I was speaking of was not a bootstrap feature at all, but a feature of my browser. – hofan41 Commented Mar 17, 2015 at 19:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Well, bootstrap is a framework based on html, css and javascript. The javascript part of this framework uses jQuery and not a own library. Then you could try to solve it using a regex with javascript/jquery, for sample:

var fullPath = $("#exampleFile").val();    
var filename = fullPath.replace(/^.*[\\\/]/, '');

Take a look here:

• http://jsfiddle/na4j7n6y/1/
• How to get the file name from a full path using JavaScript?

Check this JSFiddle to reference the filepath displayed.

http://jsfiddle/67y9tpd4/

HTML

<div id="write"><button type="button" onclick="getAfilepath()">Print Filepath</button></div>

JS

function getAfilepath(){    
    var afilepath = document.getElementById("uploadFile").value;
    document.getElementById("write").innerHTML=afilepath;
}

本文标签： htmlGet filename from input file in JavascriptStack Overflow