删除图像时如何显示加号按钮？ [英] How do I show back the plus button when delete image?
本文介绍了删除图像时如何显示加号按钮？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< input type ='file'multiple style =display：none; id =upload-file/> （$ i = 0; $ i <5; $ i ++）{？>
$ b< div class =img-containerid =box<？php echo $ i？>数据状态= 0 >
< button type =submitclass =btn btn-primary upload-add-product<？php
if（$ i！= 0）echo'style =display：none; '; ？> >
< i class =glyphicon glyphicon-plus>< / i>
< / button>
< button style =display：none; class =btn btn-danger show-button>
< i class =glyphicon glyphicon-trash>< / i>
< / button>
< / div>
<？php}？>
我的javascript代码如下所示：
...
$（document）.on（'click'，。show-button，function（）{
var imgTmpl ='< div class =img-container>'+
'< button style =display：none;type =submitclass =btn btn-danger show-button>'+
'< I类= glyphicon glyphicon-垃圾 >< / I>' +
'< /按钮>< / DIV>';
$（本）.parent（ ）.remove（）;
$（'body'）。append（imgTmpl）;
}）;
演示和完整代码如下所示： http://phpfiddle.org/main/code/9kb1-r47h
我的问题是：当我上传5张图片时。然后我删除1张图片。 Plus图标不会再出现。
我该如何解决这个问题？
解决方案
像这样改变你的代码，这是我的工作，
< style type =text / css >
.img-container {
width：162px;
height：142px;
border：2px纯黑色;
float：left;
margin-right：5px;
职位：亲属;
}
.delete-button {
position：absolute;
剩下：0;
}
.upload-add-product {
margin-top：55px;
margin-left：55px;
}
.img-container .show-button {position：absolute; top：0;左：0; }
< / style>
< link rel =stylesheettype =text / csshref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css >
< link rel =stylesheettype =text / csshref =https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css >
< input type ='file'multiple style =display：none; id =upload-file/>
< div class =images-area> （$ i = 0; $ i <5; $ i ++）{？>
$ b< div class =img-containerid =box<？php echo $ i？> data-status =0data-index =<？= $ i？>>
<？php if（$ i == 0）：？>
< button type =submitclass =btn btn-primary upload-add-product>
< i class =glyphicon glyphicon-plus>< / i>
< / button>
<？php endif; ？>
< / div>
<？php}？>
< / div>
< script type =text / javascriptsrc =https://code.jquery.com/jquery-3.2.1.min.js>< / script>
< script type =text / javascript> （）;点击（）;上传 - 添加产品，函数（）{
$（＃上传文件）。
}）;
$（function（）{
$（：file）。change（function（）{
var noOfFiles = this.files.length;
for （VAR I = 0; I< noOfFiles;我++）{
变种读者=新的FileReader（）;
reader.onload = imageIsLoaded;
reader.readAsDataURL（this.files [I] ）;
}
}）;
}）;
函数imageIsLoaded（e）{
var imgTmpl ='';
var IsImgAdded = false;
$（'。img-container'）。each（function（）{
if（$（this）.find（'img'）。length == 0&& IsImgAdded == false ）{
$（this）.append（imgTmpl）;
IsImgAdded = true;
$ b $（this）.attr（'data-status'，1）; $ b $（$）（this）.find（'。upload-add-product'）。hide（）;
// $（this）.find（'。show-button'）。show（）;
var img ='< img height =142width =162 src ='+ e.target.result +'>'+
'< button type =buttonclass =btn btn-danger delete-button>'+
'< i class =glyphicon glyphicon-trash>< / i>'+
'< / button>';
$（'＃box'+ i）.html（''）;
$（'＃box'+ i）.append（imgTmpl）;
if（i< 5）{
$（'＃box'+（i + 1））。html（'< button type =buttonclass =btn btn-primary upload-add-product>'+
'< i class =glyphicon glyphicon-plus>< / i>'+
'< / button>'）;
$（'。img-container'）。each（function（）{
if（$（this）.attr（'data-status'）！= 1）{$ （'。upload-add-product'）。show（）;
return false;
}
}）
}
}）;
};
$ b $（document）.on（'click'，'。delete-button'，function（）{
var i = $（this）.closest（'。 （'data-index'）;
$（'＃box'+ i）.remove（）;
$（'。images-area'）。append（' < div class =img-containerdata-status =0>< / div>'）;
var blank = 0;
$（'。img-container'）。每个（函数（i）{
$（this）.attr（{'id'：'box'+ i，'data-index'：i}）;
if（（$（this） .attr（'data-status'）== 0）&&（blank == 0））{
console.log（k）;
blank = i;
}
if $（'。img-container'）。find（'。upload-add-product'）。length == 0）{
$（'＃ box'+ blank）.append（'< button type =buttonclass =btn btn-primary upload-add-product>'+
'< i class =glyphicon glyphicon-plus >< / i>'+
'< /按钮>'）;
}
}）;
< / script>
演示是在这里
可能会帮助你......
My html code is like this :
<input type='file' multiple style="display: none;" id="upload-file" />
<?php
for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0">
<button type="submit" class="btn btn-primary upload-add-product"<?php
if($i!=0) echo' style="display:none;"'; ?> >
<i class="glyphicon glyphicon-plus"></i>
</button>
<button style="display: none;" class="btn btn-danger show-button">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
<?php } ?>
My javascript code is like this :
...
$(document).on('click',".show-button",function(){
var imgTmpl = '<div class="img-container">'+
'<button style="display: none;" type="submit" class="btn btn-danger show-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button></div>';
$(this).parent().remove();
$('body').append(imgTmpl);
});
Demo and full code is like this : http://phpfiddle.org/main/code/9kb1-r47h
My problem is : when I uploaded 5 images. Then I delete 1 image. Plus icon does not appear again.
How can I solve this problem?
解决方案
change your code like this , it is work for me,
<style type="text/css">
.img-container {
width: 162px;
height: 142px;
border: 2px solid black;
float: left;
margin-right: 5px;
position: relative;
}
.delete-button {
position: absolute;
left: 0;
}
.upload-add-product {
margin-top: 55px;
margin-left: 55px;
}
.img-container .show-button { position: absolute; top: 0; left: 0; }
</style>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<input type='file' multiple style="display: none;" id="upload-file" />
<div class="images-area">
<?php
for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0" data-index="<?=$i?>">
<?php if ($i == 0): ?>
<button type="submit" class="btn btn-primary upload-add-product">
<i class="glyphicon glyphicon-plus"></i>
</button>
<?php endif; ?>
</div>
<?php } ?>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).on('click','.upload-add-product',function(){
$("#upload-file").click();
});
$(function () {
$(":file").change(function () {
var noOfFiles = this.files.length;
for(var i=0; i < noOfFiles; i++) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[i]);
}
});
});
function imageIsLoaded(e) {
var imgTmpl = '';
var IsImgAdded=false;
$('.img-container').each(function(){
if($(this).find('img').length==0 && IsImgAdded==false){
$(this).append(imgTmpl);
IsImgAdded=true;
$(this).attr('data-status',1);
//$(this).find('.upload-add-product').hide();
//$(this).find('.show-button').show();
var i = $(this).closest('.img-container').data('index');
var imgTmpl ='<img height="142" width="162" src='+e.target.result+'>'+
'<button type="button" class="btn btn-danger delete-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button>';
$('#box'+i).html('');
$('#box'+i).append(imgTmpl);
if(i<5) {
$('#box'+(i+1)).html('<button type="button" class="btn btn-primary upload-add-product">'+
'<i class="glyphicon glyphicon-plus"></i>'+
'</button>');
}
$('.img-container').each(function(){
if( $(this).attr('data-status') != 1){
$(this).find('.upload-add-product').show();
return false;
}
})
}
});
};
$(document).on('click','.delete-button',function(){
var i = $(this).closest('.img-container').attr('data-index');
$('#box'+i).remove();
$('.images-area').append('<div class="img-container" data-status="0"></div>');
var blank = 0;
$('.img-container').each(function(i){
$(this).attr({'id':'box'+i,'data-index':i});
if(($(this).attr('data-status') == 0) && (blank == 0)) {
console.log("k");
blank = i;
}
});
if($('.img-container').find('.upload-add-product').length == 0) {
$('#box'+blank).append('<button type="button" class="btn btn-primary upload-add-product">'+
'<i class="glyphicon glyphicon-plus"></i>'+
'</button>');
}
});
</script>
Demo is here
May be it helps you...
这篇关于删除图像时如何显示加号按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
