深入学习jquery源码之上传附件插件的实现

深入学习jquery源码之上传附件插件的实现

/**
 * 上传附件通用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 = $([''
					        	          ,''+ file.name +''
					        	          ,''+ (file.size/1024).toFixed(1) +' kb'
					        	          ,'等待上传'
					        	          ,''
					        	            ,'重传'
					        	            ,'删除'
					        	          ,''
					        	        ,''].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 = '