How to get the full path to the selected file from

Question

JavaScript

There is an element:

<input type="file" name="file" multiple="true" accept="image/jpeg,image/gif,image/x-png" id="file" value="Обзор" />

I need to display its thumbnail immediately after selecting a picture (before loading).
I thought to do something banal:

getElementById('img').src = getElementById('file').value;
<img src="" id="img" />

But browsers either do not substitute anything, or "C:\fakepath\filename" or even just filename. Googling found out that this is all because of the security policy of browsers.
Advise any client method of the decision of a problem. The only thing that comes to mind is sending the file ajax to the handler to reduce and return to the script. But I would like not to eat user traffic and load the server once again.
Maybe there is some other way to solve the problem? Maybe with client Java?
Thanks in advance!

UPD: read that Firefox and Chrome haveinput.files[0].getAsDataURL();Can't find something similar for other browsers? :)

UPD2: We tried to pile a java applet with a friend, it turns out they were also limited, unlike dexktop and server ... It seems that only through the cunning native code in C you can break the prohibitions :) So for this business you also need to write libraries for different platforms + sign and make trust...

Answer 1

Here is a good example

Answer 2

This can only be done through JS if the browser supports the File API (part of HTML-5).

Answer 3

Flash (preferably) or Java
from browsers, the source path on the client system fired in my memory, except perhaps IE (but this is PPC, of ​​course)

Answer 4

When adding a file, go through all the file names and create for each of them img src="file[i]" with icon sizes. You don't even need to send anything to the server.

Answer 5

Flash not an option? The same VKontakte loader of the nightstand shows from the photos without uploading to the server.

Answer 6

Google ajax upload, the idea is that the file will be uploaded to the server, and then the user will be shown a thumbnail of this file already from the server. For example, uploading an avatar to facebook or google+ works. All this can be implemented in js (dances are possible for IE6, but still it can be implemented without crutches in the form of flash, java, etc.)

Answer 7

A working option through a temporary path.
Other options will not work, because. Javascript is denied access to the file system.
This option works. Example: jsfiddle.net

<input type="file" id="i_file" value=""><br>
<input type="button" id="i_submit" value="Submit">
<img src="" width="200" style="display:none;" >
<div id="disp_tmp_path"></div>

<script>
$('#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("Временный путь (для проверки, скопируйте в браузер) --> <strong>["+tmppath+"]</strong>");
});
</script>