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

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

<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… Вроде бы только через хитрый нативный код на Си можно нарушить запреты :) Ито для этого дела нужно писать еще и библиотеки под разные платформы + подписать и сделать доверительными…
  • Вопрос задан
  • 26970 просмотров
Решения вопроса 1
@Ura78
Вот, хороший пример
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 6
norlin
@norlin
Через JS такое можно сделать, только если браузер поддерживает File API (часть HTML-5).
Ответ написан
Комментировать
@impass
Flash (предпочтительнее) или Java
из браузеров исходный путь на клиентской системе палил на моей памяти разве что IE (но это ппц, конечно)
Ответ написан
Комментировать
@s0rr0w
При добавлении файла пройтись по всем именам файлов и создать для каждого из них img src=«file[i]» с иконочными размерами. Ничего на сервер даже не надо отсылать.
Ответ написан
sHinE
@sHinE
веб-разработчик, php/js/mysql и сопутствующее
Флеш не вариант? Тот же загрузчик Вконтакте тумбочки показывает от фоток без загрузки на сервер.
Ответ написан
theRavel
@theRavel
Погуглите ajax upload, идея в том, что файл будет загружен на сервер, и потом пользователю будет показана миниатюра этого файла уже с сервера. Так например работает загрузка аватара на facebook или google+. Все это можно реализовать на js (для IE6 возможны пляски, но все равно это реализуемо без костылей в виде flash, java и пр.)
Ответ написан
@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>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Decart IT-production Москва
от 180 000 до 230 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
от 200 000 до 600 000 ₽
15 апр. 2024, в 09:15
1200 руб./за проект
15 апр. 2024, в 07:55
5000 руб./за проект
15 апр. 2024, в 04:12
1 руб./за проект