Превью изображений перед отправкой формы

Рейтинг: 2Ответов: 0Опубликовано: 17.03.2015

Добрый вечер, друзья.

Мне нужно было сделать превью изображений перед отправкой формы, но я очень слаб в js. =( По этому сделал такие костыли:

<div>
    <img id="image_preview" class="thumb"/>
    <input type="file" class="image" id="image_preview" />
</div>

<div>
    <img id="image_preview2" class="thumb"/>
    <input type="file" class="image" id="image_preview2" />
</div>

и т.д., может быть сколько угодно input'ов

<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$('.image').change(function() {
  var input = $(this)[0];
  var id = $(this).attr('id');

  if ( input.files && input.files[0] ) {
    if ( input.files[0].type.match('image.*') ) {
      var reader = new FileReader();
      reader.onload = function(e) { $('#'+id).attr('src', e.target.result); }
      reader.readAsDataURL(input.files[0]);
    }
  }
});
</script>

Но мне как-то совсем не нравится, может, кто сможет подсказать, как сделать более красиво и правильно? Возможно ли как-то избавится от id="image_preview" в инпутах и имэйджах? И также подскажите, пожалуйста, должен ли этот вариант работать во всех браузерах? Проверил в современных IE, Chrome, FireFox - везде работает.

Заранее спасибо!

P.S. Разумеется, код я нагуглил, добавив только свои костыли - id="image_preview" и $('#'+id).attr('src', e.target.result).

Ответы

Ответов пока нет.