Здесь, когда пользователь выбирает изображения, он добавляется внутри тега ul
. Все это работает нормально (в приведенном ниже коде все еще могут быть некоторые проблемы, так как я очень новичок в jquery).
Теперь, что я хочу здесь изменить, это то, что изображение, которое выбирается сначала, будет иметь <li class='thumbnail'>
по умолчанию, тогда другие оставшиеся выбранные изображения не будут иметь этот класс thumbnail
в теге li. Но позже пользователь может изменить миниатюру изображения, щелкнув изображение. Как я могу сделать это здесь?
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
img = `
<li class = "thumbnail">
<div class = "image">
<img src = "${e.target.result}" width = "83" height = "100"/>
<div class = "close"><div class = "ic-close" id = "img-remove"></div>
</div>
<p>Thumbnail</p></li>
`
$('#blah').append(img);
if ( $('ul#blah li').length > 5 ) {
$("#blah li:last-child").remove();
alert("You can't upload more than 5 images.");
}
}
reader.readAsDataURL(input.files[0]);
$('ul#blah').on('click','.ic-close',function(e) {
console.info('k');
$(this).closest('li').remove();
});
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
HTML
<div class = "col-md-6 form-group">
<label for = "">Upload Image</label>
<ul class = "list list-inline" id = "blah">
<div class = "files--upload"><input name='image' class = "d-none imgUpload" type = "file"
id = "imgInp" placeholder = ""/><label class = "upload-label" for = "imgInp">
<div class = "ic-add"></div>
<div class = "mt-2">Add Photo</div>
</label></div>
</ul>
</div>
на самом деле, неважно, короткий или длинный тот или иной код, желательно добавить этот код в вопрос. Так же, как когда код в комплекте, это упрощает работу программиста. Еще лучше, если вы сделаете воспроизводимый код.
ваш код добавляет тег img
к тегу img
.
@sergeykuznetsov Я только что обновил свой html
Один из самых простых способов загрузки превью — быстрый счетчик, который запретит последующие загрузки в превью.
Я объявил глобально переменную:
var prew = true;
Здесь происходит разовое добавление изображения для превью, а также, prew
присваивается false
, что означает невозможность дальнейшего добавления изображения к этому div (#img_prew)
.
if (prew) {
$('#img_prew').append(img);
$('#img_prew').find('.thumbnail .image p').text('This is a preview');
prew = false;
}
Создал div для предварительного просмотра:
<div id = "img_prew">...</div>
И в конце задаю ширину и высоту через css:
#img_prew img{
width: 300px;
height: 300px;
}
var prew = true;
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
img = `
<li class = "thumbnail">
<div class = "image">
<img src = "${e.target.result}" width = "83" height = "100"/>
<div class = "close"><div class = "ic-close" id = "img-remove"></div>
</div>
<p>Thumbnail</p></li>
`
if (prew) {
$('#img_prew').append(img);
$('#img_prew').find('.thumbnail .image p').text('This is a preview');
prew = false;
}
$('#blah').append(img);
if ( $('ul#blah li').length > 5 ) {
$("#blah li:last-child").remove();
alert("You can't upload more than 5 images.");
}
}
reader.readAsDataURL(input.files[0]);
$('ul#blah').on('click','.ic-close',function(e) {
console.info('k');
$(this).closest('li').remove();
});
}
}
$("#imgInp").change(function(){
readURL(this);
});
#img_prew img{
width: 300px;
height: 300px;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.js"></script>
<div class = "col-md-6 form-group">
<label for = "">Upload Image</label>
<div id = "img_prew"></div>
<ul class = "list list-inline" id = "blah">
<div class = "files--upload"><input name='image' class = "d-none imgUpload" type = "file"
id = "imgInp" placeholder = ""/><label class = "upload-label" for = "imgInp">
<div class = "ic-add"></div>
<div class = "mt-2">Add Photo</div>
</label></div>
</ul>
</div>
Теперь я столкнулся с другой проблемой: я не могу передать эти выбранные файлы изображений в серверную часть. Только первое изображение, которое было выбрано сначала, отправляется на серверную часть. У вас есть идеи, почему это может произойти?
Покажите мне, как вы передаете изображения на сервер.
Я использую этот атрибут входного имени для файлов <input name='image' type = "file"
нет, я имею в виду что-то вроде этого - stackoverflow.com/questions/41250223/…
Давайте продолжим обсуждение в чате.
вы хотите добавить html?