<input type="file"> в виде картинки

Опубликовано: 12 Июн 2016

Код кнопки

 <div class="form_upload">
        <img class="prev" id="img-preview" src="tpl/images/add_photo.png"  onclick="chooseFile();"  />
         <input style="display:none;" type="file" id="img" multiple accept="image/*" name="img"/>
         <a id="reset-img-preview"><img src="tpl/images/delete_img.png"></a>
 </div>

Скрипт, который вызывает загрузку файла при нажатии на картинку.

function chooseFile() {
      $("#img").click();
   }

Скрипт который создает превью и обрабатывает событие удаления.

$('#img').change(function () {
            var input = $(this)[0];
            if (input.files && input.files[0]) {
                if (input.files[0].type.match('image.*')) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#img-preview').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(input.files[0]);
                } else {
                    console.log('ошибка, не изображение');
                }
            } else {
                console.log('хьюстон у нас проблема');
            }
        });
     
        $('#reset-img-preview').click(function() {
            $('#img').val('');
            $('#img-preview').attr('src', 'tpl/images/add_photo.png');
        });  

 

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: