目前正在進行的項目中，后台需要實現一次性上傳多張圖片的功能，現記錄實現的過程如下。
1.設置功能方法的點擊事件
var imga = '<a href="#" onclick="imgrow(\'' + id + '\')">'+imgTitle; //攜帶該記錄的主鍵id過去
2.點擊方法的具體實現
html DOM對象
<div id="myImg" style="overflow-x:hidden" sec:authorize="hasRole('GOODS_VIEW')"></div>
function imgrow(id) { var imgTitle = '圖片'; if(!top.checkHiddenSet("plateNumFlag")){ imgTitle = '車輛圖片管理'; } var detailLog= $('#myImg').dialog( { title: imgTitle,//這里動態設置標題顯示 width: 945, height: '90%', modal: true, closable:true, href: "goods/indexImg?id="+id,//跳轉到圖片展示的dialog對話框中 onLoad: function () { img(id);//圖片的回顯方法 }, buttons : [ { text : "關閉", handler : function() { $('#t_goods').datagrid('reload'); $('#t_goods').datagrid('unselectAll'); detailLog.dialog('close'); } } ], onClose:function(){//關閉右上方紅叉的方法 fileNums = [];//清空圖片id數組 $('#t_goods').datagrid('reload'); $('#t_goods').datagrid('unselectAll'); } }); // $("#id").val(id); };
3.回顯方法img()的實現
function img(id){ //id是標的id $.ajax({ type: "get", async: false, dataType : 'json', url: parent.baseUrl+"goods/findGoodsimg/" + id, //獲取關於該記錄的所有的圖片的信息 success: function (result) { var json = eval(result);//循環遍歷獲取到的圖片信息的情況 showGoodsImgs(id,json);//顯示記錄關聯的圖片信息情況 createImgContainer(id,json);//創建一次向上傳多張圖片的容器 } }); }
控制器中獲取記錄的圖片信息的具體方法
/** * 查詢單個標的的圖片 */ @RequestMapping(value = "/findGoodsimg/{id}", method = RequestMethod.GET) @ResponseBody public List<GoodsImageDTO> findGoodsImg(@PathVariable("id") Long id, GoodsCreateOrUpdateModel goods, BindingResult result) { logger.debug("進入單個標的的圖片查詢。。。。。。。"); Long goodsId = id; if (logger.isDebugEnabled()) { logger.debug("merchantCreate, id{},merchantName: {}.", goods.getId(), goods.getName()); } Specification<GoodsImage> spec = (root, query, cb) -> { List<Predicate> predicates = new ArrayList<Predicate>(); if (goodsId != null) { Predicate predicate = cb.equal(root.get(GoodsImage_.goodsId), goodsId); predicates.add(predicate); } if (!predicates.isEmpty()) { return cb.and(predicates.toArray(new Predicate[0])); } else { return null; } }; List<GoodsImage> typeList = goodsImageRepository.findAll(spec); List<GoodsImageDTO> dtoList = (new GoodsImageDTOAssembler()).toDTOList(typeList); if (dtoList != null && dtoList.size() > 0) { AttachmentFile attachmentFile = null; for (GoodsImageDTO goodsImage : dtoList) { attachmentFile = attachmentFileService.findById(goodsImage.getFileId()); if (attachmentFile != null) { goodsImage.setFilePath(attachmentFile.path()); goodsImage.setOriginalName(attachmentFile.originalName()); goodsImage.setFileCount(dtoList.size()); } } } return dtoList; }
顯示記錄關聯的圖片信息的方法
<div>
<div id="detailImg"></div>
<div id="img-container"></div>
</div>
/** * 顯示關聯圖片 */ function showGoodsImgs(id,json){ document.getElementById('detailImg').innerHTML = renderGoodsImgs(id,json); imgCount = json.length; }
回顯圖片的格式化顯示的方法
function renderGoodsImgs(id,json){ var previewImgUrl = parent.baseUrl + "file/previewImg/";//定義圖片的路徑的方法 var detail=""; detail+='<table>'; detail+='<tr style="height:1px;">'; detail+='<td><input style="height:1px;" type="hidden" name="id" value="'+id+'" /></td>'; detail+='</tr>'; if(!top.checkHiddenSet("plateNumFlag")){ //客制化顯示信息 detail+='<tr style="width:100%;" align="center"><br/><br/>'; detail+='<b><font color="#FF0000" size="4px">'; detail+=' 提示：請至少上傳4張照片，分別為車輛左前45°、車輛右后45°、前排內飾圖、后排內飾圖。'; detail+='</font></b>'; detail+='</tr>'; } detail+='<tr>'; if(json.length <= 5){ for (var int = 0; int < 5; int++) { detail+='<td style="height: 1px;visibility:hidden">'; if(int == 0){ detail+=' '; } detail+='<img src="/admin/file/previewImg/1638/160x1"/>'; detail+='</td>'; } detail+='</tr>'; detail+='<tr>'; for (var int = 0; int < json.length; int++) { if(int == 0){ detail+=' '; } detail+='<img src="'+previewImgUrl+json[int].fileId+'/160x100"/><br/>'; if(top.checkRole(['GOODS_EDIT'])){ if(int == 0){ detail+=' '; } detail+=' '; detail+='<input onclick="showDel('+json[int].id+','+json[int].goodsId+','+json[int].fileId+')" id="ehdel_del_btn" type="button" value="刪 除 " style="margin-left:22px;" />'; } detail+='</td>'; } } if(json.length > 5){ for (var int = 0; int < 5; int++) { detail+='<td>'; if(int == 0){ detail+=' '; } detail+='<img src="'+previewImgUrl+json[int].fileId+'/160x100"/><br/>'; if(top.checkRole(['GOODS_EDIT'])){ if(int == 0){ detail+=' '; } detail+=' '; detail+='<input onclick="showDel('+json[int].id+','+json[int].goodsId+','+json[int].fileId+')" id="ehdel_del_btn" type="button" value="刪 除 " style="margin-left:22px;" />'; } detail+='</td>'; } detail+='</tr>'; detail+='<tr>'; for (var int = 5; int < json.length; int++) { detail+='<td>'; if(int == 5){ detail+=' '; } detail+='<img src="'+previewImgUrl+json[int].fileId+'/160x100"/><br/>';
//根據權限動態顯示是否能夠刪除的一些信息情況 if(top.checkRole(['GOODS_EDIT'])){ if(int == 5){ detail+=' '; } detail+=' '; detail+='<input onclick="showDel('+json[int].id+','+json[int].goodsId+','+json[int].fileId+')" id="ehdel_del_btn" type="button" value="刪 除 " style="margin-left:22px;" />'; } detail+='</td>'; } } detail+='</tr>'; detail+='</table>'; return detail; }
4.圖片上傳容器的方法的實現
<div id="img-container"></div>
/** * 創建圖片容器，用來顯示要上傳的圖片 */ function createImgContainer(id,json){ document.getElementById('img-container').innerHTML = imgContainer(id,json); //multiple的input組件加載后才能初始化ImgLoader var imgUploadUrl = parent.baseUrl+'file/uploadImg?filePath=aucimg_'+$("#type").val(); initImgLoader("fileupload", imgUploadUrl); }
初始化多個上傳圖片容器的方法
function imgContainer(id,json){ var detail = ''; if(json.length > 9){
//異常信息提示 }else if(top.checkRole(['GOODS_EDIT'])){ detail += '<table class="formTable">'; detail += '<tr><td><div class="uploads_container">'; detail += '<div class="uploads_container_sublocation">'; detail += '<input id="fileupload" style="display:none" type="file" name="file" multiple="multiple"/>'; detail += '</div>'; detail += '<span id="add_text">添加圖片</span>'; detail += '</div></td></tr>'; detail += '<tr><td><div style="display:block;margin:0 auto;width:150px">'; detail += '<input onclick="bundGoodsClick();" id="addimg" type="button" value="添 加 " style="float:left;margin-top:20px;display:inline-block"/>'; detail += '<input onclick="showUploding('+id+')" id="uploding" type="button" value="上 傳 " style="float:right;margin-top:20px;display:inline-block"/>'; detail += '</div></td></tr>'; detail += '</table>'; } return detail; }
initImgLoader 方法的具體實現
/** * 初始化ImgLoader，響應文件添加並自動上傳 */ function initImgLoader(id, url){ $('#'+id).fileupload({ url: url, dataType: 'json', autoUpload: true, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, maxFileSize: 999000, disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent) }).on('fileuploadadd', function (e, data) { //添加文件事件 }).on('fileuploadprocessalways', function (e, data) { }).on('fileuploadprogressall', function (e, data) { //文件上傳事件 }).on('fileuploaddone', function (e, data) { var fileNum=data._response.result; addImgToContainer(fileNum); fileNums.push(fileNum); }).on('fileuploadfail', function (e, data) { alert("文件上傳失敗"); }); }
上傳事件方法
/** * 點擊上傳 */ function showUploding(id){ if(fileNums.length + imgCount > 10){ alert("圖片總數超出上限(10)！！！"); } else if(fileNums == null && fileNums.length == 0){ alert("請先添加圖片！！！"); } else { $.each(fileNums,function(key, val){ goodsImage(id,val); }); } }
