87,921
社区成员
发帖
与我相关
我的任务
分享
var array=[];//用来存储图片地址的数组,从而存放到数据库中,每次关闭模态框的时候数组就要重置为空
/**
* 上传图片
*/
$("#productPicDiv").change(function () {
var formData=new FormData();
var productPic=$("#productPicId")[0].files[0];
formData.append("productPic",productPic);
$.ajax({
url:"/product/uploadProductPic",
type:"post",
data:formData,
contentType:false,//告诉jquery不要设置content-type的请求头
processData:false,//告诉jquery不要去处理发送的数据
success:function (data) {
//添加图片的按钮要动态变化,每次先移走,最后再创建
$("#addProductPicBtn").remove();
//用于上传数据的图片地址数组
array.push(data);
//加入的图片
addProductPic(data);
if(array.length<3){
//添加图片的按钮,但最多上传三张照片,超过三张就不显示这个添加图片的按钮了,也就是不允许再添加图片了
addProductPicBtn();
}
else{
$("#addProductPicBtn").remove();
}
},
error:function (data) {
falseProductPic.style.display='block';
}
});
});
/**
* 添加的商品图片
*/
function addProductPic(data) {
var img=document.createElement("img");
img.src=data;
img.height=80;
img.width=80;
var icon=$("<button style='position: absolute;padding-top: -10px;margin-left: 60px'></button>").addClass("mdi mdi-close-circle-outline").addClass("mybutton");
var div=$("<div style='margin-right: 15px;'></div>").append(img);
$("<div></div>").append(icon).append(div).appendTo("#productPicDiv");
icon.click(function () {
//点击按钮删除图片
$(this).parent().remove();
//获取当前元素下在data数组里的索引
var index=array.indexOf(data);
//删除array数组里的这个元素
if(index>-1)
array.splice(index,1);//splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
//删除完之后要继续判断当前照片个数,从而决定是否要显示添加图片按钮
if(array.length==2){
//添加图片的按钮,但最多上传三张照片,超过三张就不显示这个添加图片的按钮了,也就是不允许再添加图片了
addProductPicBtn();
}
})
}
/**
* 添加图片按钮
*/
function addProductPicBtn() {
var text=$("<div></div>").addClass("myaddpicText").append($("<span>+</span>")).append($("<p></p>").append("点击上传"));
var input="<input type='file' id='productPicId' name='productPic' multiple='multiple' class='custom-file-input'>";
$("<div id='addProductPicBtn'></div>").addClass("myaddpicBtn").addClass("col-md-3").append(text).append(input).appendTo("#productPicDiv")
}
前台代码:
<%--上传商品图片--%>
<label class="mylabel">商品图片(4:3的比例最佳)</label>
<%--上传的过程在js--%>
<div class="row" id="productPicDiv" style="margin-left: 10px" ></div>
<small id="falseProductPic" class="invalid-feedback">上传的图片大小不超过10M</small>