Захватите изображение из поля ввода, чтобы получить данные изображения / отобразить изображение - PullRequest
Новая
       13

Захватите изображение из поля ввода, чтобы получить данные изображения / отобразить изображение

1 голос
/ 10 сентября 2011

Я осматривался и не смог выяснить, возможно ли это или нет.

Вот что я хотел бы сделать перед отправкой: когда пользователь выбирает файл для загрузки, я хочу получить данные изображения и преобразовать его в base64. После того, как он был конвертирован, я бы хотел либо напрямую отобразить его в div, либо отправить его на сервер через AJAX, а затем отобразить в div.

Ниже в основном то, что я ищу: 

// index.php
<input type="file" name="img" id="img" onChange="displayImg(this)">

// displayImg.js
function displayImg(img) {
   imgData = img.?;  // How do I do this?
   img64 =           // I know how to do this.
   document.write("<img src='data:image/jpeg;base64,"+img64+"' />");
}

1 Ответ

6 голосов
/ 11 сентября 2011 
function displayImage(evt){
  var files = evt.target.files;
  var reader = new FileReader();

  reader.onload = function(frEvent) {
      document.getElementById("renderImage").innerHTML = '<img src="'+frEvent.target.result+'" />';
  }
  reader.readAsDataURL(files[0]);
}

Код выше работает для меня. Не хватает проверки и всего такого хорошего, но это должно стать хорошей отправной точкой для вас.

...