When I call val()
on an input with type="file"
I only get file name rather than full path. How can I get full path?
var fullPath = $('#fileUpload1'). val();
Use IE with file protocol if you want to get the real path. Possible duplicate of How to get full path of selected file on change of <input type='file'> using javascript, jquery-ajax?
One can find the path of the file by using two attributes called src or href. Those attributes help us to attach an external file or source with our HTML document. It's an important thing to know the path of files which are going to include in web pages.
You can't: It's a security feature in all modern browsers.
For IE8, it's off by default, but can be reactivated using a security setting:
When a file is selected by using the input type=file object, the value of the value property depends on the value of the "Include local directory path when uploading files to a server" security setting for the security zone used to display the Web page containing the input object.
The fully qualified filename of the selected file is returned only when this setting is enabled. When the setting is disabled, Internet Explorer 8 replaces the local drive and directory path with the string C:\fakepath\ in order to prevent inappropriate information disclosure.
In all other current mainstream browsers I know of, it is also turned off. The file name is the best you can get.
More detailed info and good links in this question. It refers to getting the value server-side, but the issue is the same in JavaScript before the form's submission.
Well, getting full path is not possible but we can have a temporary path.
Try This:
It'll give you a temporary path not the accurate path, you can use this script if you want to show selected images as in this jsfiddle example(Try it by selectng images as well as other files):-
JSFIDDLE
Here is the code :-
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>"); });
Its not exactly what you were looking for, but may be it can help you somewhere.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With