Input Type File Add File Path To A Span
css, html, javascript, jquery
Solution
DEMO
$('input[type="file"]').change(function(){
$(this).closest('.browse-wrap').next('.upload-path').text(this.value);
});
Demo: get rid of `C:\fakepath\` in Chrome
Or using the HTML5 file API
DEMO
$('input[type="file"]').change(function(){
var f = this.files[0];
var name = f.name;
$(this).closest('.browse-wrap').next('.upload-path').text(name);
});
Problem
I customized my input type="file" just like Facebook upload instead of textbox and a button(default input type="file") I make my input file a button only without the textbox where you can see the path of the file. I'am planning to add a span or a p tag next to my customized input file to show the path of the file. How can I print the file path to my span tag when I choose a file? html code ``` <!doctype> <html> <head> </head> <body> <div class="browse-wrap"> <div class="title">Choose a file to upload</div> <input type="file" name="upload" class="upload" title="Choose a file to upload"> </div> <span class="upload-path"></span> </body> </html> ``` css code ``` div.browse-wrap { top:0; left:0; margin:20px; cursor:pointer; overflow:hidden; padding:20px 60px; text-align:center; position:relative; background-color:#f6f7f8; border:solid 1px #d2d2d7;} div.title { color:#3b5998; font-size:14px; font-weight:bold; font-family:tahoma, arial, sans-serif;} input.upload { right:0; margin:0; bottom:0; padding:0; opacity:0; height:300px; outline:none; cursor:inherit; position:absolute; font-size:1000px !important;} span.upload-path { margin:20px; display:block;} ``` Thanks!