CHECK OUT THE JSFIDDLE CODE HERE
This code utilizes the <input type="file> element to allow users to browse and select a file, with the aim of obtaining the full path.
The HTML:
<input class="file_upfile" type="file" />
<input class="btn_showpath" type="button" value="Show Full Path"/>
<p class="p_upfilepath">The full path will be displayed here.</p>
In Firefox, using $('.classname').val(); will only return the FILENAME.txt. However, in IE and Chrome it will return "C:/fakepath/myfilename.txt".
jQuery Code:
/* The <p> tag currently displays only the filename. We want the complete path like "c:\something\folder\filename.txt" */
$('.btn_showpath').click(function(){
var getpath = $('.file_upfile').val();
$('.p_upfilepath').slideUp(function(){
$('.p_upfilepath').text('"'+getpath+'"').slideDown();
});
});
CSS Styling:
.p_upfilepath{
background:#aaaaaa;
padding:3px 10px;
width:auto;
color:#555555;
}