实现如下效果：
并列
我之前不会排列时这样的：
没有排版
image.png
之前代码：
if (order.goodImagesOne != null && order.goodImagesOne !=""){
goodsImg += "<a id='showOne' href='" + parent.basePath + "/"
+ order.goodImagesOne + "' target='_blank'><img id='goodImagesOne' src='"
+ parent.basePath + "/" + order.goodImagesOne
+ "' width='160' height='90'/></a>";
goodsImg += "<div><input type='file' style='display:' onchange='uploadAndShowImgs(this.files[0],1)' accept='image/*' ></div>";
}
if (order.goodImagesTwo != null && order.goodImagesTwo !=""){
goodsImg += "<a id='showTwo' href='" + parent.basePath + "/"
+ order.goodImagesTwo + "' target='_blank'><img id='goodImagesTwo' src='"
+ parent.basePath + "/" + order.goodImagesTwo
+ "' width='160' height='90'/></a>";
goodsImg += "<div><input type='file' style='display:' onchange='uploadAndShowImgs(this.files[0],2)' accept='image/*' ></div>";
}
因为div是块元素会占据一行，就算设置div宽度一样会占据一行所以没办法，设置style='display:inline-block'
inline-block（融合行内于块级）:
结合了inline与block的一些特点，用通俗的话讲，就是不独占一行的块级元素。所以图片可以并排
修改后代码：
function gotoGoodOrder(taobaoId,states){
var row ;
var box =$('#addFlag_box')
.dialog(
{
title : '好评图片确认',
width : 630,
height : 350,
href : '${basePath}/orderSys/orderGoods/getGoodsOrderPicture/'+taobaoId,
cache : false,
modal : true,
onLoad : function(data) {
var order = data.model;
var goodsImg = "";
if(order!=null){
if (order.goodImagesOne != null && order.goodImagesOne !=""){
goodsImg += "<div style='display:inline-block'><a id='showOne' href='" + parent.basePath + "/"
+ order.goodImagesOne + "' target='_blank'><img id='goodImagesOne' src='"
+ parent.basePath + "/" + order.goodImagesOne
+ "' width='160' height='90'/></a>";
goodsImg += "<div><input type='file' style='display:' onchange='uploadAndShowImgs(this.files[0],1)' accept='image/*' > </div></div>";
}
if (order.goodImagesTwo != null && order.goodImagesTwo !=""){
goodsImg += "<div style='display:inline-block'><a id='showTwo' href='" + parent.basePath + "/"
+ order.goodImagesTwo + "' target='_blank'><img id='goodImagesTwo' src='"
+ parent.basePath + "/" + order.goodImagesTwo
+ "' width='160' height='90'/></a>";
goodsImg += "<div><input type='file' style='display:' onchange='uploadAndShowImgs(this.files[0],2)' accept='image/*' ></div> </div>";
}
if (order.goodImagesThree != null && order.goodImagesThree !=""){
goodsImg += "<div style='display:inline-block'><a id='showThree' href='" + parent.basePath + "/"
+ order.goodImagesThree + "' target='_blank'><img id='goodImagesThree' src='"
+ parent.basePath + "/" + order.goodImagesThree
+ "' width='160' height='90'/></a>";
goodsImg += "<div><input type='file' style='display:' onchange='uploadAndShowImgs(this.files[0],3)' accept='image/*' ></div> </div>";
}
if (order.goodImagesFour != null && order.goodImagesFour !=""){
goodsImg += "<div style='display:inline-block'><a id='showFour' href='" + parent.basePath + "/"
+ order.goodImagesFour + "' target='_blank'><img id='goodImagesFour' src='"
+ parent.basePath + "/" + order.goodImagesFour
+ "' width='160' height='90'/></a>";
goodsImg += "<div><input type='file' style='display:' onchange='uploadAndShowImgs(this.files[0],4)' accept='image/*' ></div> </div>";
}
if (order.goodImagesFive != null && order.goodImagesFive !=""){
goodsImg += "<div style='display:inline-block'><a id='showFive' href='" + parent.basePath + "/"
+ order.goodImagesFive + "' target='_blank'><img id='goodImagesFive' src='"
+ parent.basePath + "/" + order.goodImagesFive
+ "' width='160' height='90'/></a>";
goodsImg += "<div><input type='file' style='display:' onchange='uploadAndShowImgs(this.files[0],5)' accept='image/*' > </div></div>";
}
}
if(states == "0") {
var tmp = "<div class='test e' style='font-size:24px;font-weight:bold;text-align:center;padding-bottom:30px'>已确认好评图片</div>";
$('#addFlag_box .panel-body').html(tmp);
}else{
var tmp = "<div class='test e' style='font-size:24px;font-weight:bold;text-align:center;padding-bottom:30px'>待确认好评图片</div>";
$('#addFlag_box .panel-body').html(tmp);
}
$('#addFlag_box .panel-body').append(goodsImg);
},
buttons : [
{
text: '确定',
id: "submitFlag",
iconCls: 'icon-ok',
handler : function() {
$.ajax({
url:"${basePath}/orderSys/orderGoods/updateGoodsOrderState",
async:false,
type:"post",
data:{'taobaoId':taobaoId,'states':0,'goodImagesOne':1 ,'goodImagesTwo':2 ,'goodImagesThree':3 ,'goodImagesFour': 4,'goodImagesFive':5 },
dataType:"json",
success:function(data){
window.location.href="/cyy/orderSys/orderGoods/goodsOrderMasterList";
}
});
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler : function() {
$.ajax({
url:"${basePath}/orderSys/orderGoods/updateGoodsOrderState",
async:false,
type:"post",
data:{'taobaoId':taobaoId,'states':1},
dataType:"json",
success:function(data){
window.location.href="/cyy/orderSys/orderGoods/goodsOrderMasterList";
}
});
}
}]
});
}
function uploadAndShowImgs(file,imgurl) {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
var formData = new FormData();
formData.append("file", file);
$.ajax({
url : "${basePath}/orderSys/file/upload/file/installImg",
data : formData,
type : "post",
dataType : "json",
cache : false,
processData : false,
contentType : false,
success : function(result) {
if (result.respCode == 1) {
if(imgurl==1){
$('#goodImagesOne').attr('src',parent.basePath+"/"+result.data);
$('#showOne').attr('href',parent.basePath+"/"+result.data);
}else if(imgurl==2){
$('#goodImagesTwo').attr('src',parent.basePath+"/"+result.data);
$('#showTwo').attr('href',parent.basePath+"/"+result.data);
}else if(imgurl==3){
$('#goodImagesThree').attr('src',parent.basePath+"/"+result.data);
$('#showThree').attr('href',parent.basePath+"/"+result.data);
}else if(imgurl==4){
$('#goodImagesFour').attr('src',parent.basePath+"/"+result.data);
$('#showFour').attr('href',parent.basePath+"/"+result.data);
}else if(imgurl==5){
$('#goodImagesFive').attr('src',parent.basePath+"/"+result.data);
$('#showFive').attr('href',parent.basePath+"/"+result.data);
}
} else {
alert("图片上传失败！");
}
},
error : function() {
alert("图片上传失败！");
}
});
};
}
网友评论