Просмотр изображения вместо текста

Мы пытаемся загрузить изображение на наш сайт.

Мы нажимаем кнопку " Загрузить изображение".

Затем отобразится всплывающее окно.

Затем нажмите кнопку Загрузить новое изображение
После этого мы выберем изображение с компьютера и отобразим сообщение Загруженное изображение

Вместо сообщения "Загрузка изображения" я хочу отобразить предварительный просмотр Загруженного изображения, как это показано Jsfiddle

для отображения сообщения "Загружено изображение"

<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>

jQuery(document).ready(function () {
    jQuery('body').delegate('.newcustomimage', 'change', function () {
        if(jQuery(this).val()) {
            jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploaded.</div>');
        }
    });
});

Я сделал ниже изменения для вышеуказанного кода, чтобы отобразить " Предварительный просмотр изображения" вместо сообщения. Теперь предварительный просмотр изображения не отображается после загрузки изображения. Вместо этого он отображается, как показано ниже, перед загрузкой изображения на сайт.

<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>
<img id="blah" src="http://example.com/media/custom_product_preview/quote" />

jQuery(document).ready(function () {
    jQuery('body').delegate('.newcustomimage', 'change', function () {
        if (jQuery(this).val()) {
            jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploded.</div>');
   }
});

function readURL(input) { 
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Ответ 1

Чтобы сделать это, пожалуйста, следуйте ниже

добавьте это в свой html

<input type="file" id="add_image_{{rand}}" data-rand={{rand}} class="newcustomimage" name="new_image" onchange="readURL(this);" value=""  />

<img id="previewImg" src="#" style="display: none;height: 200px; width: 200px;" >

Для этого будет java script.

function readURL(input) {

    if (input.files && input.files[0]) { 

        var reader = new FileReader(); 
        reader.onload = function (e) {
            jQuery('#previewImg').attr('src', e.target.result);
            jQuery('#previewImg').show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

Это будет работать в вашем случае, пожалуйста, попробуйте.

Ответ 2

Кажется, это работает нормально. Просто нужно настроить размеры изображения.

Примените следующий css:

.tool-body.selected {
    text-align: center;
}

#previewImg {
    height: 75px;
    display: inline-block;
}

Также исправьте написание загруженного.

ИЗМЕНИТЬ

Следующий код отлично работает для OP и отвечает его требованиям:

jQuery(document).ready(function() {
    jQuery('body').on('.newcustomimage', 'change', function() {
        if (jQuery(this).val()) {
            console.log(jQuery(this).val());
            if (jQuery(this).val()) {
                var reader = new FileReader();
            }

            jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploaded.</div>');
        }
    });

    jQuery(".aitcg-button").click(function() {
        jQuery('#previewImg').hide();
    });
});

function readURL(input) {
    if (input.files && input.files[0]) {

        var reader = new FileReader();
        reader.onload = function(e) {
            jQuery('#previewImg').attr('src', e.target.result);
            jQuery('#previewImg').show();
        };
        reader.readAsDataURL(input.files[0]);
    }
}

Скремблер на рабочий сайт можно найти здесь.

Ответ 3

Вы можете попробовать как это

HTML

<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>
<div id="imgcontaner"></div>

$(".newcustomimage").change(function() {
   var input = this;
   if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
                $("#imgcontaner").empty();
                $('<img/>').appendTo("#imgcontaner")
                           .attr('src', e.target.result);
          }

          reader.readAsDataURL(input.files[0]);
   }
});

Ответ 4

Вы не вызывали функцию при выборе файла. Вам нужно изменить его следующим образом:

    jQuery(document).ready(function (){
      jQuery('body').delegate('.newcustomimage', 'change', function (){
       if (jQuery(this).val())
          {
             readURL(jQuery(this));
          }
      });
  });

сохранить функцию readurl вне jQuery (document).ready

     function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
            jQuery('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
     }