Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2016, 02:24
Интересующийся
Отправить личное сообщение для Devil198711 Посмотреть профиль Найти все сообщения от Devil198711
 
Регистрация: 21.04.2016
Сообщений: 21

Превью изображения перед загрузкой на сервер
Ситуация такая:
Реализую загрузку аватаров, нужно сделать так чтобы после выбора изображения пользователе появлялась превью Аватара. Пока есть такой код:
function selectAva() {
var doc = document;
var typefile = doc.getElementById('file').files[0].type;
if (typefile != 'image/png' && typefile != 'image/jpeg') {
doc.getElementById('error').innerHTML = '<span class="errors_aut">Не правильный тип изображения!</span><br><br>';
} else {
doc.getElementById('error').innerHTML = '';
doc.getElementById('prevava').innerHTML = '<img src="'+Что вставить сюда?+'">';
}
}
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2016, 04:36
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Devil198711,
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    #preview img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <input id="upload" type="file" />
  <div id="preview"></div>
  
  <script>
    (function() {
      var inpElem = document.getElementById('upload'),
          divElem = document.getElementById('preview');
      
      inpElem.addEventListener("change", function(e) {
          preview(this.files[0]);
      });
      
      function preview(file) {
        if ( file.type.match(/image.*/) ) {
          var reader = new FileReader(), img;
          
          reader.addEventListener("load", function(event) {
            img = document.createElement('img');
            img.src = event.target.result;
            divElem.appendChild(img);
          });
          
          reader.readAsDataURL(file);
        }
      }
    })();
  </script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2016, 07:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Decode, высоту лучше автоматом задавать от заданной ширины, иначе искажения могут быть.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Crop + превью изображения Angelina30 AJAX и COMET 3 29.09.2015 14:37
Вывод превью картинки до загрузки на сервер chapser AJAX и COMET 0 12.08.2014 01:01
Ресайз изображения у клиента с последующей загрузкой на сервер BraNikita Общие вопросы Javascript 1 08.11.2011 12:57
Проблема с загрузкой файла на сервер shkarbatov Серверные языки и технологии 8 13.08.2011 01:27
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28