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 = $("<div class='colondediv' style='width: 60px;height: 50px;float: left'><img src='' style='width: 60px;height: 50px;margin-top: 12px;' class='col_servicePictureImgPreview'>" + "<div style='position: relative;width: 16px;height: 16px;float: right;margin-top: -60px' class='close'>" +"<img src='../images/close.png' style='width: 15px;height: 15px;' ></div>"+ "</div>").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') }}");
<input id="col_servicePictureImgDivAdd" type="button" readonly="readonly" value="添加图片" οnclick="$('#lessionfileForm #fileUploadInput').click()" style="width: 173px" />
<div id="col_servicePictureImgDivPreview" style='display:inline-block'> </div>
<form style="display: none" class="easyui-form" method="post" enctype="multipart/form-data" action="{{ path('lessionFileUpload') }}" id="lessionfileForm"> <input id="fileUploadInput" type="file" multiple name="trainFile[]" οnchange="lessionFileUpload.operate(this)"/> </form>
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=$("<div class='colondediv' style='width: 60px;height: 50px;float: left'><img src='' style='width: 60px;height: 50px;margin-top: 12px;' class='col_servicePictureImgPreview'>" + "<div style='position: relative;width: 16px;height: 16px;float: right;margin-top: -60px' class='close'>" +"<img src='../images/close.png' style='width: 15px;height: 15px;' ></div>"+ "</div>").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; } }