Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Full path from file input using jQuery

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?

like image 907
gruszczy Avatar asked Aug 15 '10 20:08

gruszczy


People also ask

How can I get full path of uploaded file in HTML using jquery?

var fullPath = $('#fileUpload1'). val();

How do I get real path instead of Fakepath?

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?

How do I get the file path in HTML?

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.


2 Answers

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.

like image 148
Pekka Avatar answered Sep 22 '22 12:09

Pekka


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.

like image 43
DWX Avatar answered Sep 19 '22 12:09

DWX