Javascript input.files[i].url?

Question

I'm using a javscript that grabs the file name of the file the user chooses in a upload form. However, I want to grab the URL on their PC where the file is located - how do I do so?

My code:

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 don't want the name - I want the URL of where its located. How do I do so?

Answer 1

Well I'm not going the steal the URL - I want to show a preview of the file their locating (Like, if they choose an image, I can do a base32 of it and have it preview it)

You are not able to access/use the user's local file-system path. This means that you can't use the real path to the file on their machine to preview.

If you need a URL/path to access the file though, to do things like show an image preview, you can create a temporary URL which will let you do this kind of thing. The Javascript method for doing this is:

window.URL.createObjectURL(myObject) (Documentation)

Here is an example of an 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 out for yourself here: http://jsfiddle.net/u6Fq7/