Как отобразить выбранное изображение без отправки данных на сервер?

Я пытаюсь показать клиенту изображение, которое он выбрал:


Но я могу'т прочитать значение ввода, как я проверилВот, Можно ли отобразить изображение?

Вonchange Я могу отправить форму на сервер, а сервер может отправить данные обратно, но действительно ли это необходимо? Можно'т клиент выводит данные без пинг-понга на сервер? Это проблема безопасности?

 user186461017 июн. 2013 г., 00:23
Если ты'повторно отправьте форму таким образом, тогда да - пинг-понг на сервере неизбежен. Вы можете загрузить изображение из локальной файловой системы с помощью HTML5 File API и отобразить его.

Ответы на вопрос(1)

Решение Вопроса

FileReader Объект web-api для этого смотрите в следующем фрагменте:

HTML

<input id="src" type="file"> <!-- input you want to read from (src) -->
<img id="target"> <!-- image you want to display it (target) -->

JavaScript

function showImage(src,target) {
  var fr=new FileReader();
  // when image is loaded, set the src of the image where you want to display it
  fr.onload = function(e) { target.src = this.result; };
  src.addEventListener("change",function() {
    // fill fr with image data    
    fr.readAsDataURL(src.files[0]);
  });
}

var src = document.getElementById("src");
var target = document.getElementById("target");
showImage(src,target);
 Mladen Danic15 мая 2014 г., 11:19
var input=this в вашем коде ничего не делает.input переменная никогда не используется.
 revolver17 июн. 2013 г., 00:34
Ницца. Это работает во всех браузерах?
 Jan Turoň17 июн. 2013 г., 00:36
Смотрите ссылку. Он должен работать во всех основных браузерах и начиная с IE10.
 Jan Turoň15 мая 2014 г., 12:00
@MladenDanic действительно, я удалил его, спасибо
 Mrigank Pawagi09 апр. 2018 г., 17:40
HTML комментарии вместо//

Ваш ответ на вопрос