layui上传图片

html

				<div class="layui-inline">
					<label class="layui-form-label fwb">用户照片</label>
					<div class="layui-upload layui-input-inline">
					<button type="button" class="layui-btn" id="test1">上传照片</button>
					<div class="layui-upload-list">
					<img class="layui-upload-img" src="" id="userPhone">
					<p id="demoText"></p>
					</div>
					</div>
					<div>
						<input type="hidden" id="attachmentId" name="attachmentId" lay-verify="" autocomplete="off" placeholder="请输入" ${edited} class="layui-input">
				     	<input type="hidden" name="imagePath" id="imagePath"/>
						<input type="hidden" name="orgId" id="orgId"/>
						<input type="hidden" name="uploadAttachmentIds" id="uploadAttachmentIds">
					</div>
				</div>
			</div>

js

var ShowUser= CardPager.extend({
	init: function(filter, url){
		debugger;
		this._super(filter, url);
		//界面需要引用的插件
		this.plugins = ['element', 'form', 'layedit', 'upload', 'laydate', 'layer'];
		this.primaryKey = "userId";
		this.primaryValue = $.QueryString("entityId");
		this.dataUrl = CONTEXT_PATH + '/user/get';
		this.entityName = "user";
		var imagePath = $("#imagePath").val();
		$("#userPhone").attr('src',imagePath);
	},
	initLayuiPlugin: function(){
		this._super(); 
		var _self = this;
		_self.files = null;
		layui.laydate.render({
			elem: '#birthDate'
		});
		//执行实例
		$.renderUpload({
			fieldName : "照片",							//业务字段名称
	    	fieldCode : "dealPicture",							//业务字段编码
	    	entityName : "user",									//业务实体
	    	selfFiles : _self.files
		});
	},
	initEvent: function(){
		this._super();
		var _self = this;
		_self.uploadUserPic();
		//TODO 父类只定义了 保存事件,其他事件在这里进行定义
	},
	initThirdPlugin: function(){
		var _self = this;
	},
	uploadUserPic:function(){
		
		 var uploadDoc = layui.upload.render({
	            elem:'#test1',
	            accept: 'images',
	            url:CONTEXT_PATH+"/attach/upload",
	            data:{																	//上传参数
			    	"entityName" : "personalUser",							
			    	"fieldCode" : "userId",								
			    	"fieldName" : "userId",								
			    },	
	            before:function(obj){
	                obj.preview(function(index, file, result){
	                    $('#userPhone').attr('src', result);
	                });
	            },
	            done:function(res, index, upload){
	                if(res && res.status == WebConst.SUCCESS){//自定义返回失败
	                	//$($("iframe[src='/partyMember/detail?act=add']").contents().find("#partyMemberForm")).setValues(ptParam);
//	                	$("#docDemo").attr("src",CONTEXT_PATH+"/attach/showPicture?attachmentId="+res.data['attachmentId']+"&isThumbnail=true&date="+new Date().getTime());
	                	$("#uploadAttachmentIds").val(res.data['attachmentId']);
	                	/*return layer.msg('请点击提交个人资料上传图片');*/
	                }else{
	                   /* layer.msg('请点击提交个人资料上传图片');*/
	                }
	            },
	            error:function(){
	               var demoText = $('#demoText');
	                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
	                demoText.find('.demo-reload').on('click', function(){
	                    uploadDoc.upload();
	                });
	            }
	        });
	}
});

$(function(){
	showUser = new ShowUser('user', CONTEXT_PATH + '/user/save');
	showUser.render(function(data,_self){
		debugger;
		var imagePath = CONTEXT_PATH+$("#imagePath").val();
		$("#userPhone").attr('src',imagePath);
		
		//如果有附件,上传附件
		layui.form.on('submit(' + _self.filter + ')', function(data){
			//处理 	KindEditor 富文本取值问题
			var formDoms = data["form"];
			for(i=0,len=formDoms.length; i<len; i++){
				var idom = data["form"][i],
					idomName = data["form"][i].name,
					tagName = idom.tagName,
					idomId = data["form"][i].id,
					keditor = _self[idomName];
				if(idom.tagName == "TEXTAREA" && keditor){
					keditor.sync();
					data.field[idomName]=base64.encode($('#'+idomId ).val());
				}
			}
			var retData = $.getData(_self.url, data.field);
			if(retData.status!=1000 || retData.status == WebConst.FAIL){
				layer.msg('保存失败', {icon: 5});
				return false;
			}
			
			//如果有附件,上传附件
			var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),
				entityId = retData.data;
				if(!uploadAttachmentIds && data.field["uploadAttachmentIds"]){
					uploadAttachmentIds = data.field["uploadAttachmentIds"];
				}
			if(true && uploadAttachmentIds && entityId){
				var params = {};
				if(uploadAttachmentIds instanceof Array)
				{
                    params.attachmentIds = uploadAttachmentIds.join(",");
				}
				else
				{
                    params.attachmentIds = uploadAttachmentIds;
				}
				params.entityId = entityId;
				params.entityName="personalUser";		
				$.getData(CONTEXT_PATH + "/attach/updateEntityId", params);
				//$.getData(CONTEXT_PATH + "/attach/updateEntityName", params);
				
			}
			 $("#uploadAttachmentIds").data("uploadAttachmentIds",null);
			layer.msg('保存成功', {icon: 6});
			return false;
		});
		});
	
	function beforeClose (){
		//如果涉及到文件上传,关闭卡片页面将未上传的附件进行删除
		var unuploadFiles = $("#uploadAttachmentIds").data("uploadAttachmentIds");
		if(unuploadFiles && unuploadFiles.length>0){
			var url = CONTEXT_PATH + '/attach/delete/datafile';
			$.getData(url,{'attachmentIds':unuploadFiles.join(",")});
		}
	}
	
});


后台

User实体类

	private Attach picName;
	private String imagePath = null;
	public Attach getPicName() {
		return picName;
	}
	public void setPicName(Attach picName) {
		this.picName = picName;
	}
	
	public String getImagePath() {
		if(picName!=null && !StringUtil.isEmpty(picName.getAttachmentId())) {
			imagePath = "/attach/showPicture?attachmentId="+picName.getAttachmentId()+"&isThumbnail=true";
		}else {
			imagePath="暂无图片";
		}
		return imagePath;
	}
	public void setImagePath(String imagePath) {
		this.imagePath = imagePath;
	}

附件实体类

public class Attach implements Serializable{

	private static final long serialVersionUID = 1L;
	private String attachmentId;
    private String attachmentName; 
    private String entityId;
    private String entityName;
    private String fieldName;
	public String getAttachmentName() {
		return attachmentName;
	}
	public void setAttachmentName(String attachmentName) {
		this.attachmentName = attachmentName;
	}
	
	public String getEntityId() {
		return entityId;
	}
	public void setEntityId(String entityId) {
		this.entityId = entityId;
	}
	public String getAttachmentId() {
		return attachmentId;
	}
	public void setAttachmentId(String attachmentId) {
		this.attachmentId = attachmentId;
	}
	public String getEntityName() {
		return entityName;
	}
	public void setEntityName(String entityName) {
		this.entityName = entityName;
	}
	public String getFieldName() {
		return fieldName;
	}
	public void setFieldName(String fieldName) {
		this.fieldName = fieldName;
	}
    
}

查询接口

  	<resultMap id="BaseResultMap" type="com.cnten.userCenter.user2.model.User" >
	    <id column="USER_ID"		property="userId"	jdbcType="VARCHAR" />
          <association property="picName" column="USER_ID" select="com.userCenter.user.dao.AttachUserMapper.findById"></association>
  	</resultMap>
 	<resultMap id="BaseResultMap" type="com.cnten.userCenter.user2.model.Attach" >
	    <id column="ATTACHMENT_ID"		property="attachmentId"	jdbcType="VARCHAR" />
	    <result column="ATTACHMENT_NAME"  	property="attachmentName" 	jdbcType="VARCHAR" />
	    <result column="ENTITY_ID"  	property="entityId" 	jdbcType="VARCHAR" />
	    <result column="ENTITY_NAME"  	property="entityName" 	jdbcType="VARCHAR" />
	     <result column="FIELD_NAME"  	property="fieldName" 	jdbcType="VARCHAR" />
  	</resultMap>
  	
  	<select id="findById" parameterType="String" resultMap="BaseResultMap">	
     select * from (select attachment_id from ATTACHMENT where ENTITY_ID=#{USER_ID} order by create_date desc) where rownum=1
	</select>

上传附件js框架

(function(scope){
	var CardPager = Class.extend({
		init: function(filter, url){
			this.filter = filter;
			this.url = url;
		},
		render: function(afterRender){
			var _self = this;
			_self.initThirdPlugin(); 		//初始化第三放插件
			
			//plugins 这个可以不传,但是请不要传空数组过来
			var plugins = _self.plugins || ['form'];
			layui.use(plugins,function(){
				debugger;
				_self.initEvent();
				_self.initLayuiPlugin();	//初始化layui组件		
				//渲染表单数据
				debugger;
				var params = {};
					params[_self.primaryKey] = _self.primaryValue;
				$.ajaxReq(_self.dataUrl, params, function(data){
					if(data && data.status == WebConst.SUCCESS && data.data){
						debugger;
						var cardForm = $("#"+_self.filter+"Form"),
							formDoms = cardForm[0];
						cardForm.setValues(data.data);
						//处理富文本赋值问题
						for(i=0,len=formDoms.length; i<len; i++){
							var idom = formDoms[i],
								idomName = idom.name,
								tagName = idom.tagName,
								idomId = idom.id,
								keditor = _self[idomName];
							if(idom.tagName == "TEXTAREA" && keditor){
								keditor.html(data.data[idomName]);
							}
						}	
						layui.form.render();
					}
					if(afterRender){
						afterRender(data,_self);
					}
				},WebConst.AJAX_FORM,null,false);
				
				
			});
			
			_self.initFiles();
		},
		
		initFiles: function(){
			var _self = this,
				attachParam = {};
				attachParam.entityId = _self.primaryValue;
				attachParam.entityName = _self.entityName;
			$.ajaxReq(CONTEXT_PATH + "/attach/entity/files", attachParam, function(data){
				if(data && data.status == WebConst.SUCCESS && data.data){
					var files = data.data;
					$("div[class='layui-upload']").each(function(index,obj){
						var containerId = $(obj).attr('id'),
							attachField = containerId.split("_")[0],
							tableBody = containerId + "_table";
						for(var i=0,len=files.length; i<len; i++){
							var cFile = files[i];
							if(cFile.fieldCode == attachField){
								 var attachImg = "";
								 if(!$.isEmptyStr(cFile.fileName) && (cFile.fileName.indexOf('docx')!=-1 
										 || cFile.fileName.indexOf('doc')!=-1))
								 {
									 //attachImg = '<td><img src="' + CONTEXT_PATH +"platform/common/images/word.png" /></td>';
									 attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/word.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
								 }
								 else if(!$.isEmptyStr(cFile.fileName) && cFile.fileName.indexOf('pdf')!=-1)
								 {
									 attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/pdf.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
								 }
								 else
								 {
									 attachImg = '<td><img src="' + CONTEXT_PATH + '/attach/showPicture?attachmentId=' 
					          		 + cFile.attachmentId + '&isThumbnail=true" width="100" height="60" style="cursor:pointer;"/></td>';
								 }
								 var $tr = $(['<tr id="upload-'+ cFile.attachmentId +'" attatchmentId="'+ cFile.attachmentId +'">'
							          , attachImg
							          ,'<td>'+ cFile.fileName +'</td>'
							          ,'<td>'+ cFile.fileSize +' kb</td>'
							          ,'<td>'+ cFile.createDate +'</td>'
							          ,'<td>'
							            ,'<a class="layui-btn layui-btn-mini demo-reload" href="'+  CONTEXT_PATH +'/attach/download?attachmentId='+ cFile.attachmentId +'">下载</a>&nbsp;&nbsp;'
							            ,'<button class="layui-btn layui-btn-mini layui-btn-danger">删除</button>'
							          ,'</td>'
							        ,'</tr>'].join(''));
								  $tr.find('button').on('click',function(){
									  var rlt = $.getData(CONTEXT_PATH + "/attach/delete/updflag",{'attachmentId':$(this).closest("tr").attr('attatchmentId')});
									  if(rlt && rlt.status == '1000'){
										  $(this).closest("tr").remove();
									  }
									  return false;
								  });
								 $("#" + tableBody).append($tr);
							}
						}
					})
				}
			},WebConst.AJAX_FORM,null,false);
		},
		initThirdPlugin: function(){
			
		},
		initLayuiPlugin: function(){
			var _self = this;
		},
		initEvent: function(){
			var _self = this;
			layui.form.on('submit(' + _self.filter + ')', function(data){
				//处理 	KindEditor 富文本取值问题
				var formDoms = data["form"];
				for(i=0,len=formDoms.length; i<len; i++){
					var idom = data["form"][i],
						idomName = data["form"][i].name,
						tagName = idom.tagName,
						idomId = data["form"][i].id,
						keditor = _self[idomName];
					if(idom.tagName == "TEXTAREA" && keditor){
						keditor.sync();
						data.field[idomName]=base64.encode($('#'+idomId ).val());
					}
				}
				var retData = $.getData(_self.url, data.field);
				
				if(retData.status!=1000 || retData.status == WebConst.FAIL){
					if(!$.isEmptyStr(retData.message))
					{
						layer.msg(retData.message, {icon: 5});
						return false;
					}
					layer.msg('保存失败', {icon: 5});
					return false;
				}
				//如果有附件,上传附件
				var uploadAttachmentIds = $("#uploadAttachmentIds").data("uploadAttachmentIds"),
					entityId = retData.data;
					$("input[name='"+ _self.primaryKey +"']").val(retData.data);
					if(!uploadAttachmentIds && data.field["uploadAttachmentIds"]){
						uploadAttachmentIds = data.field["uploadAttachmentIds"];
					}
				if(true && uploadAttachmentIds && entityId){
					var params = {};
					if(uploadAttachmentIds instanceof Array)
					{
                        params.attachmentIds = uploadAttachmentIds.join(",");
					}
					else
					{
                        params.attachmentIds = uploadAttachmentIds;
					}
					params.entityId = entityId;
					$.getData(CONTEXT_PATH + "/attach/updateEntityId", params);
				}
				 $("#uploadAttachmentIds").data("uploadAttachmentIds",null);
				//新增之前回调函数
				if(_self.afterSave && $.isFunction(_self.afterSave)){
					_self.afterSave(retData);
				}else{
					layer.msg('保存成功', {icon: 6});
				}
				return false;
			});
			if (_self.act == "read") {
				$("#images_list_table").find("td").eq(4).text("");//隐藏附件的下载和删除按钮
			}
		}
	});
	scope.CardPager = CardPager;
})(window);

layui上传附件通用js

/**
 * 上传附件通用JS (基于layerUI)
 */
;(function($){
	
	var defaults = {
			url : "/attach/upload",		
	    	fieldCode : "aboutDocument",						//业务字段编码
	    	fieldName : "相关文件",								//业务字段名称
	    	entityName : "template",							//业务实体
	};
	
	
	function renderUpload(options){
		
		this.settings = $.extend({},defaults,options);
		this.settings.elem = "#" + this.settings.fieldCode;
		this.settings.bindAction = "#" + this.settings.fieldCode + "_Action";				//上传操作按钮	
		this.settings.layuiUploadPreview = "#"+ this.settings.fieldCode +"_preview";
		this.settings.previewTableBody = "#"+ this.settings.fieldCode +"_Preview_Table";	//上传预览表格
		this.init();
	}
	//为函数添加原型链上的方法
	renderUpload.prototype = {
		init: function(){
			
			    var that = this;
				var uploadInst = layui.upload.render({
					    elem: that.settings.elem											//绑定元素
					    ,url: CONTEXT_PATH + that.settings.url 									//上传接口
					    ,accept:'file'
					    ,data:{																	//上传参数
					    	"entityName" : that.settings.entityName,							//业务实体
					    	"fieldCode" : that.settings.fieldCode,								//业务字段编码
					    	"fieldName" : that.settings.fieldName,								//业务字段名称
					    }								
					  	,auto:false												//是否选完文件后自动上传	如果设定 false,那么需要设置 bindAction 参数来指向一个其它按钮提交上传
					  	,size:0													//设置文件最大可允许上传的大小,单位 KB。不支持ie8/9;	0(即不限制)
					  	,multiple:true
					  	//是否允许多文件上传。设置 true即可开启。不支持ie8/9
					  	,bindAction: that.settings.bindAction					//指向一个按钮触发上传,一般配合 auto: false 来使用。值为选择器或DOM对象,如:bindAction: '#btn'
					    ,choose: function(res){									//选择文件后的回调函数
					    	var layIndex = layer.open({
					        	type: 1,
					        	title: "预览",
					        	maxmin: false,
					        	area : ['40%', '40%'],
					        	content:$(that.settings.layuiUploadPreview).removeAttr('style'),			//$.loadHtml(preUrl),
					        	success: function(layero){
					        		var demoListView = $(that.settings.previewTableBody).empty();
					        		var files = that.settings.selfFiles = res.pushFile(); //将每次选择的文件追加到文件队列
					        	      //读取本地文件
					        		res.preview(function(index, file, result){
					        	        var tr = $(['<tr id="upload-'+ index +'">'
					        	          ,'<td>'+ file.name +'</td>'
					        	          ,'<td>'+ (file.size/1024).toFixed(1) +' kb</td>'
					        	          ,'<td name="upload-status">等待上传</td>'
					        	          ,'<td>'
					        	            ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
					        	            ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
					        	          ,'</td>'
					        	        ,'</tr>'].join(''));
					        	        
					        	        //单个重传
					        	        tr.find('.demo-reload').on('click', function(){
					        	        	res.upload(index, file);
					        	        });
					        	        
					        	        //删除
					        	        tr.find('.demo-delete').on('click', function(){
					        	        	
						        	        delete files[index]; //删除对应的文件
						        	        tr.remove();
						        	        uploadInst.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
						        	        if(Object.getOwnPropertyNames(files).length == 0){			//当上传预览没有文件时,关闭弹出框
						        	        	 layer.close(layIndex);
						        	        }
					        	        });
					        	        demoListView.append(tr);
					        	      });
					        	},
					        	end : function(){	//layer销毁回调
					        		$(that.settings.layuiUploadPreview).attr('style','display:none;');
					        		$(that.settings.previewTableBody).empty();
					        	},
					        	cancel: function(){ 		  //右上角关闭回调
					        	}
					        });
					    	
					    }
					  	,before: function(res){					//文件提交上传前的回调
					  		$("tr",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("上传中...");
					  	}
					    ,done: function(res, index, upload){					//执行上传请求后的回调。返回三个参数,分别为:res(服务端响应信息)、index(当前文件的索引)、upload(重新上传的方法,一般在文件上传失败后使用)
					    	//上传完毕回调		"dealPicture_list_table"
					    	if(res && res.status == WebConst.SUCCESS){
					    		$(that.settings.bindAction).text("").text("上传成功");
					    		delete that.settings.selfFiles[index];
					    		//改变预览状态,将上传附件id存在	隐藏域中
					    		$("tr[id='upload-"+ index +"']",$(that.settings.previewTableBody)).find("td[name='upload-status']").text("附件缓存完毕,请点击提交上传附件");
					    		var unupload = $("#uploadAttachmentIds").data("uploadAttachmentIds");
					    		if(unupload){
					    			unupload.push(res.data['attachmentId']);
					    			$("#uploadAttachmentIds").data("uploadAttachmentIds",unupload);
					    		}else{
					    			if(res.data){
					    				$("#uploadAttachmentIds").data("uploadAttachmentIds",[res.data['attachmentId']]);
					    				/**
					    				 * 第一个方法赋不了值,通过下面的赋值
					    				 */
					    				$("#uploadAttachmentIds").val([res.data['attachmentId']]);
					    			}
					    		}
					    		
					    		//处理卡片页面列表展示问题
					    		var afile = res.data;
					    		var attachImg = "";
					    		if(!$.isEmptyStr(afile.fileName) && (afile.fileName.indexOf('docx')!=-1 
										 || afile.fileName.indexOf('doc')!=-1))
								 {
									 //attachImg = '<td><img src="' + CONTEXT_PATH +"platform/common/images/word.png" /></td>';
									 attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/word.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
								 }
								 else if(!$.isEmptyStr(afile.fileName) && afile.fileName.indexOf('pdf')!=-1)
								 {
									 attachImg = '<td><img src="'+CONTEXT_PATH+ '/platform/common/images/pdf.png"' +'width="100" height="60" style="cursor:pointer;"/></td>';
								 }
								 else
								 {
									 attachImg = '<td><img src="' + CONTEXT_PATH + '/attach/showPicture?attachmentId=' 
					          		 + afile.attachmentId + '&isThumbnail=true" max-width="120" width="100" height="60" style="cursor:pointer;"/></td>';
								 }
					    		var $tr = $(['<tr id="upload-'+ afile.attachmentId +'" attatchmentId="'+ afile.attachmentId +'">'
							          , attachImg
							          ,'<td>'+ afile.fileName +'</td>'
							          ,'<td>'+ afile.fileSize +' kb</td>'
							          ,'<td>'+ afile.createDate +'</td>'
							          ,'<td>'
							            ,'<a class="layui-btn layui-btn-mini demo-reload" href="'+  CONTEXT_PATH +'/attach/download?attachmentId='+ afile.attachmentId +'">下载</a>&nbsp;&nbsp;'
							            ,'<button class="layui-btn layui-btn-mini layui-btn-danger">删除</button>'
							          ,'</td>'
							        ,'</tr>'].join(''));
								  	$tr.find('button').on('click',function(){
								  		var attId = $(this).closest("tr").attr('attatchmentId');
								  		var url = CONTEXT_PATH + '/attach/delete/datafile';
								  		var rlt = $.getData(url,{'attachmentIds':attId});
										if(rlt && rlt.status == WebConst.SUCCESS){
											  $(this).closest("tr").remove();
											  $("#uploadAttachmentIds").data("uploadAttachmentIds").removeByValue(attId);
										  }
										return false;
								  	});
								  $("#" + afile.fieldCode + "_list_table").append($tr);
					    	}
					    }
				    ,error: function(index, upload){						//执行上传请求出现异常的回调(一般为网络异常、URL 404等)。返回两个参数,分别为:index(当前文件的索引)、upload(重新上传的方法)
				      //请求异常回调
				    }
				});
			}
	}
	
	//扩展jquery类方法
	$.extend({
		renderUpload : function(options){
			return new renderUpload(options);
		}
	});
})(jQuery);


猜你喜欢

转载自blog.csdn.net/qq_35029061/article/details/82250444