目前正在进行的项目中，后台需要实现一次性上传多张图片的功能，现记录实现的过程如下。
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); }); } }
