Problem
How can I retrieve the complete path of a file when using the input type=’file’>?
<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
$('input[type=file]').change(function () {
var filePath=$('#fileUpload').val();
});
}
</script>
However, the filePath var just holds the name of the selected file, not the complete path. I looked it up on the internet, however it appears that browsers (FF, Chrome) only display the file’s name for security reasons. Is there a method to acquire the entire path of a selected file in another way?
Asked by Yogesh Pingle
Solution #1
Browsers do not enable this for security reasons, i.e. JavaScript in the browser has no access to the File System. However, using the HTML5 File API, only Firefox provides a mozFullPath property, which returns an empty string if you try to acquire the value:
$('input[type=file]').change(function () {
console.log(this.files[0].mozFullPath);
});
As a result, don’t spend your time.
You can use the FileReader API instead if you need the file’s path to read a file. On SO, there’s a relevant question: You can see a preview of an image before it is submitted.
Answered by undefined
Solution #2
Try This:
You can use this script if you want to show selected images like in this jsfiddle example(Try it by selecting images as well as other files):-
JSFIDDLE
The code is as follows:-
HTML:-
<input type="file" id="i_file" value="">
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>
JS:-
$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
$("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
$("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});
It isn’t precisely what you were looking for, but it might be useful in some way.
Answered by DWX
Solution #3
You won’t be able to do so since the browser won’t allow it due to security concerns.
And other
This is at the conclusion of the change event function, in case you missed it.
Also, instead of creating a function for the change event, use it as shown below.
<script type="text/javascript">
$(function()
{
$('#fileUpload').on('change',function ()
{
var filePath = $(this).val();
console.log(filePath);
});
});
</script>
Answered by Dipesh Parmar
Solution #4
You can’t do it. Security prevents you from learning anything about the client computer’s filing system, which may or may not exist! You don’t know, can’t know, and won’t know if it’s a MAC, a PC, a Tablet, or an internet-connected refrigerator. Allowing you to see the whole path could also provide you with information about the client, especially if it’s a network drive.
It is possible to obtain it under certain circumstances, but it necessitates the use of an ActiveX control and will not operate in 99.99 percent of cases.
You can’t use it to restore the file to its original location anyhow (since you have no control over where, or even if, downloads are kept), so it’s not much help to you in practice.
Answered by Rajshekar Reddy
Solution #5
Did you mean to say that?
$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
$("img").fadeIn("fast").attr('src',tmppath);
});
Answered by Aytac Gul
Post is based on https://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav