Просмотр изображения вместо текста
Мы пытаемся загрузить изображение на наш сайт.
- Мы нажимаем кнопку " Загрузить изображение".
![введите описание изображения здесь]()
- Затем отобразится всплывающее окно.
![введите описание изображения здесь]()
-
Затем нажмите кнопку Загрузить новое изображение
-
После этого мы выберем изображение с компьютера и отобразим сообщение Загруженное изображение
![введите описание изображения здесь]()
Вместо сообщения "Загрузка изображения" я хочу отобразить предварительный просмотр Загруженного изображения, как это показано Jsfiddle
для отображения сообщения "Загружено изображение"
<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>
JS
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" />
Js
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>
JS
$(".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]);
}