Как предварительно просмотреть несколько изображений перед загрузкой по определенному URL-адресу фонового изображения
Привет, ребята, мне действительно нужна помощь в предварительном просмотре нескольких изображений, таких как размещение их на другом диапазоне URL-адресов фонового изображения или div
function previewImages() {
if (this.files) $.each(this.files, readAndPreview);
function readAndPreview(i, file) {
if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
return alert(file.name +" is not an image");
} // else...
var reader = new FileReader();
$(reader).on("load", function() {
$('span').css('background-image', 'url(' + this.result + ')');
});
reader.readAsDataURL(file);
}
}
$('#upload-incident-images').on("change", previewImages);
я хочу, чтобы это было так
<div>
<span class = "bigger-picture" style = "background-image: url('image1')>
<span class = "smaller-picture" style = "background-image: url('image2')>
<span class = "smaller-picture" style = "background-image: url('image3')>
<div>
потому что у промежутков есть разные классы, которые имеют разные стили. Я просто хочу, чтобы изображения заполнялись индексами диапазона
Ответы 2
Размер их <span>, как вы хотите. И вы можете поместить идентификаторы img#### там, где вы хотите их показать. Просто поместите идентификаторы образов в свои <span>.
Надеюсь, это ответит на ваш вопрос.
function readURL(input,div_id) {
var divId = '#'+div_id.id;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$(divId).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#img1").change(function() { readURL(this,imgBigger); });
$("#img2").change(function() { readURL(this,imgSmall); });
$("#img3").change(function() { readURL(this,imgSmaller); }); #imgBigger{ width:500px; height:500px;}
#imgSmall{ width:300px; height:300px;}
#imgSmaller{ width:50px; height:50px;}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = "form1" runat = "server">
<input type='file' id = "img1" />
<input type='file' id = "img2" />
<input type='file' id = "img3" />
<div class = "your_class1"><img id = "imgBigger" src = "#" alt = "imgBigger" /></div>
<div class = "your_class2"><img id = "imgSmall" src = "#" alt = "imgSmall" /></div>
<div class = "your_class3"><img id = "imgSmaller" src = "#" alt = "imgSmaller" /></div>
</form>Отредактировано Здесь вы идете .. Вызовите функцию и передайте div ids этой функции
$("Upload_button_id_here").change(function() { readURL(this, img_div_id_here); });
Привет, @Bilal Yaqoob, в моем вопросе есть ошибка. Я хочу, чтобы каждое несколько изображений имело свои назначенные div. Я только что обновил содержание своего вопроса. кстати, спасибо за ваш ответ
точно, есть ли какой-нибудь метод или, может быть, петли?
Привет @Bilal Yaqoob. мне нужен один вход, который может загружать несколько изображений, а не одну загрузку
только что разобрался в своем вопросе. Я просто инициализирую цикл, содержащий let i, и объединяю его с классами, которые имеют разные числа
for (let i = 0; i < 3; i = i + 1) {
var reader = new FileReader();
reader.onload = function(event) {
$('.incident-img-'+i).css('background-image', 'url(' + event.target.result + ')');
console.info(i);
}
reader.readAsDataURL(input.files[i]);
}
Возможный дубликат Предварительный просмотр изображения перед загрузкой