jq php 多图上传,php+jq实现多图片上传

1.上传显示图片，实时提交文件

function BigFileUpload(showId,fileFormId,delurl,downloadurl){

var fileName = new Array();

var that = this;

$(fileFormId).form({

success:function(data){ //返回信息[['文件名称','完整路径']，['','']...]

// $(showId+" .shadow").css("display","none");

data = eval('(' + data + ')');

$.each(data,function(index,val){

allpath.push(val[1]);

console.log(allpath);

if(index<10){

$(showId).append(cloneFileContent(val));

}

});

console.log(allpath);

}

});

function cloneFileContent(flName){

var temp = $("

" +

"

"

+"

"+

"

").clone();

temp.find(".col_servicePictureImgPreview").attr("src", '../images/'+flName[1]);//find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

temp.find(".close").click(function(){

$.post(delurl,{'fileGuid':flName[1]},function(data){

if(data.state=='success'){

console.log(data);

allpath=allpath.filter(function (x) {

return x!=flName[1];

})

console.log(allpath);

temp.remove();

}

},"json")

});

return temp;

};

this.operate = function(input){

$(fileFormId).form("submit");

};

this.getFilenames = function(){

console.log(fileName);

return fileName;

}

}

lessionFileUpload = new BigFileUpload("#col_servicePictureImgDivPreview","#lessionfileForm","{{ path('lessionFileDel') }}","{{ asset('fileUrl') }}");

2.修改信息是实现显示图片每张图片左上角有关闭按钮

if(addressaddress!=''&& addressaddress !=null){

/*本地预览展示*/

console.log(addressaddress);

$.each(addressaddress.split(','),function(index,val){

nowaddress.push(val);

if(index<10){

$("#col_servicePictureImgDivPreview").append(localShowImage(val));

}

});

function localShowImage(address) {

var fulContent=$("

" +

"

"

+"

"+

"

").clone();

fulContent.find(".col_servicePictureImgPreview").attr("src", '../images/'+address);

fulContent.find(".close").click(function(){

$.post('lessionFileDel',{'fileGuid':address},function(data){

if(data.state=='success'){

nowaddress=nowaddress.filter(function (x) {

return x!=address;

})

console.log(nowaddress);

$.post('updatejiyaoaddress',{'address':nowaddress.join(),'meetindid':meetingidf},function () {

},'json')

fulContent.remove();

}

},"json")

});

return fulContent;

}

}