Как узнать полный путь к выбранному файлу из <input type="file" />

Question

[andrey_kl]

Есть элемент:

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

Мне необходимо сразу после выбора картинки отобразить её миниатюру (еще до загрузки).
Думал сделать нечто банальное:

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

Но браузеры либо ничего не подставляют, либо «C:\fakepath\имя_файла» либо вообще только имя_файла. Погуглив выяснил что это все из-за политики безопасности браузеров.
Посоветуйте какой-нибудь клиентский способ решения проблемы. В голову приходит только отправка файла ajax'ом обработчику для уменьшения и отдачи скрипту. Но хотелось бы не кушать трафик пользователей да и сервер нагружать лишний раз.
Может быть есть какой-нибудь другой способ решения проблемы? Может-быть с помощью клиентского Java?
Заранее спасибо!

UPD: вычитал что у Firefox и Chrome есть input.files[0].getAsDataURL(); Для других браузеров ничего похожего не найти? :)

UPD2: Пробовали с другом java-апплет сваять, оказывается их тоже ограничили в отличии от dexktop и server… Вроде бы только через хитрый нативный код на Си можно нарушить запреты :) Ито для этого дела нужно писать еще и библиотеки под разные платформы + подписать и сделать доверительными…

Answer 1

[Ura78]

Вот, хороший пример

Answer 2

[norlin]

Через JS такое можно сделать, только если браузер поддерживает File API (часть HTML-5).

Answer 3

[impass]

Flash (предпочтительнее) или Java
из браузеров исходный путь на клиентской системе палил на моей памяти разве что IE (но это ппц, конечно)

Answer 4

[s0rr0w]

При добавлении файла пройтись по всем именам файлов и создать для каждого из них img src=«file[i]» с иконочными размерами. Ничего на сервер даже не надо отсылать.

Comments

[andrey_kl]

Похоже вы не вникли в суть проблемы. С циклами я работать умею. Только суть в том что пар-р «value» отдает «C:\fakepath\имя_файла» а не «\реальный путь\имя_файла»

[s0rr0w]

Прошу прощения, ступил. Бывает

Answer 5

[Антон]

Флеш не вариант? Тот же загрузчик Вконтакте тумбочки показывает от фоток без загрузки на сервер.

Comments

[andrey_kl]

мне бы средствами яваскрипта т.к. хочется чтобы и на мобильных платформах работало, а flash в отличии от javascript на мобильниках — редкость.

[akira]

Под мобильные можно сразу забыть про iOS, Safari Mobile запрещена загрузка из input[type=file]

Answer 6

[theRavel]

Погуглите ajax upload, идея в том, что файл будет загружен на сервер, и потом пользователю будет показана миниатюра этого файла уже с сервера. Так например работает загрузка аватара на facebook или google+. Все это можно реализовать на js (для IE6 возможны пляски, но все равно это реализуемо без костылей в виде flash, java и пр.)

Comments

[OlegTar]

с помощью html5 можно показывать миниатюры ещё до загрузки на клиенте.

Answer 7

[tecs]

Рабочий вариант через временный путь.
Другие варианты не подойдут, т.к. для Javascript запрещен доступ к файловой системе.
Этот вариант работает. Пример: 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>