1、添加图片遇到的问题:(不要一味按照效果图来做,根据更好的想法来做):新修订的效果做出来发现有问题:(本来想传个图,结果mac机截图工具截下的图格式不识别)
大概的布局就是:左侧是一个提示文本(上传图片:)右侧区域是有一个添加按钮和删除按钮来控制图片位的添加和删除(图片位在添加删除按钮的下面动态增减,右侧的按钮和图片位是一个大的div,并且给宽度一个百分比的大小)
<div class="eachitem_input_div">
<div class="prompt_txt">上传图片:</div>
<div style="float:left;width:80%;">
<div class="option_ctr_add background-col-org btnz">+</div>
<div class="option_ctr_minus btnz">-</div>
<div class="add_remove_img">
</div>
</div>
<input type="file" id="file_ns" name="upload"
οnchange="nsUploadFile(this);" style="display: none;">
</div>
add_remove_img即是要动态添加图片的部分。
由于要再下方添加图片,而两个按钮的布局中都有float:left属性,如果默认的图片样式添加了float,那么就无法换行,但是不加float图片就会都换行,而不是排成一排。于是乎菜鸟乱用方法:
/*添加和删除图片位*/
$('.option_ctr_add').on('click',function(){
if($('.add_remove_img').children().length==0){
$('.add_remove_img').append(
'<br><div class="img_notfirst_div">'+
'<div class="img_each" οnclick="selectImg(this)">'+
'<img alt="" src="" class="img_pre">'+
'</div>'
);
}else{
$('.add_remove_img').append(
'<div class="img_notfirst_div">'+
'<div class="img_each" οnclick="selectImg(this)">'+
'<img alt="" src="" class="img_pre">'+
'</div>'
);
}
});
添加float样式,在第一次加载图片位时添加一个<br>换行符,但是刚加上发现第一排第一个图片位总是靠右空出一段距离,原因:<br>的默认高度不够高(比添加图片按钮所占的高度要小),所以自定义了br标签,设置了新的高度,解决。
2、一开始添加的图片位点击事件不好使,后来经过上面在每个添加的布局中分别绑定onclick事件就可以了。
3、删除图片位:
/*删除图片位*/
$('.option_ctr_minus').on('click',function(){
if($('.add_remove_img').children().length>0){
$('.add_remove_img').children().last().remove();
}
});
.children().last().remove()方法也是让我惊呆了,好强大。
4、上传图片不成功,明明获取到了图片路径,但是ui上面显示不出来,原因是:onclick事件如上图中所示,写在了外层div中,this传递的是外层的div对象
function selectImg(self){
clickImg = $(self);
console.log(clickImg.children());
$('#file_ns').click();
};
为图片添加图片时应该这样:
clickImg.children().attr('src',data.model.url);
5、js的hide()和show()方法要和style(display:none)结合使用,如果不定义display,hide和show方法是不好用的。