У меня есть следующий код JS, и я не могу получить указанный вид div
с помощью appendTo
.
Как я могу исправить этот код, чтобы получить результат, показанный ниже?
$(function(){
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<div class = "r_img_con">' + ('<img>'))).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
$($.parseHTML('<div class = "r_img">')).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.al_output_image');
});
});
Тестовое задание
<input type = "file" name='upload' class = "upload" accept = "image/*" id = "gallery-photo-add" multiple/>
<div class = "al_output_image"></div>
В настоящее время получаю:
<div class = "r_img_con" src = "data:image/...">
<img>
</img>
</div>
<div class = "r_img"></div>
Я пытаюсь получить:
<div class = "r_img_con">
<img src = "data:image/...">
<div class = "r_img"></div>
</div>
@TechYogesh Взгляните сейчас.
Похоже, это должно быть помечено jQuery.
Это (stackoverflow.com/a/11152351/10411270) может помочь вам лучше понять, что вам нужно передать селектор, а не ссылку на объект.
Я даже не понимаю, зачем использовать parseHTML () для этой задачи ...
Я сделал решение немного подробным для ясности.
...
reader.onload = function(event) {
var $firstDiv = $('<div/>',{
class: 'r_img_con',
});
var $img = $('<img/>', {
src: event.target.result,
});
var $subDiv = $('<div/>', {
class: 'r_img',
});
$firstDiv.append($img).append($subDiv).appendTo(placeToInsertImagePreview);
}
...
подскажите что такое
placeToInsertImagePreview
. Это идентификатор или ссылка?