Javascript input.files [i] .url?

Question

I use javscript that captures the name of the file that the user selects on the upload form. However, I want to capture the URL on my PC where the file is located - how do I do this?

My code is:

for (var i = 0; i < input.files.length; i++) { var li = document.createElement("li"); li.innerHTML = input.files[i].name; ul.appendChild(li); } 

It shows input.files [i] .name, but I do not need a name - I need the URL of where it is. How to do it?

Answer 1

You cannot do this in Javascript due to possible security implications; it is in the interest of users that you cannot do this, and therefore the standard does not specify a method for accessing file URIs.

If you really need this functionality, you will need to use other third-party plugins, such as Java, although I do not recommend this.

Answer 2

Well, I'm not going to steal the url. I want to show a preview of the file in which they are located (for example, if they select an image, I can make it base32 and preview it)

You cannot access or use the local path of the user's file system. This means that you cannot use the real file path on your computer for preview.

If you need a URL / path to access the file to do something like show a preview image, you can create a temporary URL that allows you to do such things. Javascript method for this:

window.URL.createObjectURL(myObject) ( Documentation )

Here is an example of image preview using HTML, Javascript and jQuery ...

 <div id="formContainer"> <form action="http://example.com" method="POST"> <input id="imageUploadInput" name="imageUploadInput" type="file" accept="image/*" /> <button id="submitButton" type="submit">Submit</button> </form> </div> <div id="imagePreviewContainer"> </div> <script type="text/javascript"> $("#imageUploadInput").change(function () { var image = this.files[0]; $("#imagePreviewContainer").innerHTML = ''; var imgCaption = document.createElement("p"); imgCaption.innerHTML = image.name; var imgElement = document.createElement("img"); imgElement.src = window.URL.createObjectURL(image); imgElement.onload = function () { window.URL.revokeObjectURL(this.src); }; $("#imagePreviewContainer").innerHTML = ''; // clear existing content $("#imagePreviewContainer").append(imgCaption); $("#imagePreviewContainer").append(imgElement); }); </script> 

Try it yourself: http://jsfiddle.net/u6Fq7/

Answer 3

This information is personal and private. Browsers do not provide this JavaScript information.

Answer 4

There is no URL where the file is stored on the user's computer.

In addition, different browsers send different information about the file name to the server, some send only the file name, some send the full path, so you cannot rely on getting the full path.