cap 附件处理展示标签 uitype="Capattachment"

Capattachment.js

/**
 * cap 附件处理展示标签 uitype="Capattachment"
 * author:yangsai
 * date: 2015122 17:26:56
 * 
 */
(function(g, $){
	//web应用名字
	var webPath = '/' + g.location.pathname.split('/')[1];
	//上传下载action dwr文件引入路径
	var dwrActionPath =  webPath + '/cip/dwr/interface/FileLoaderAction.js';
	var dwrAction;

	//默认配置
	var dafault_opt = {
		mode:'Single'
	};

	//配置key
	var optKey = ['uploadId','uploadKey','mode'];

	jQuery(document).ready(function($) {
		//加载dwr FileLoaderAction.js文件
		$.getScript(dwrActionPath, function(data, textStatus) {
			 dwrAction = g.FileLoaderAction;
			 if($.isEmptyObject(dwrAction)) {
				throw new Error('未引入FileLoaderAction.js文件出错,请检查引入路径：' + dwrActionPath);
			}
			scan();
		});
	});
	
	/**
	 * 扫描capattachment标签
	 */
	function scan () {
		var $attachmentElems = $("[uitype='Capattachment']");
		if($attachmentElems || $attachmentElems.length > 0) {
			for (var i = 0; i < $attachmentElems.length; i++) {
				var elem = $attachmentElems[i];
				new CapAttachment(elem);
			}
		}
	}

	/**
	 * 获取文件ico路径
	 */
	function getFileIcon(fileName){
        var ext = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase(),
            maps = {
                "rar":"icon_rar.gif",
                "zip":"icon_rar.gif",
                "tar":"icon_rar.gif",
                "gz":"icon_rar.gif",
                "bz2":"icon_rar.gif",
                "doc":"icon_doc.gif",
                "docx":"icon_doc.gif",
                "pdf":"icon_pdf.gif",
                "mp3":"icon_mp3.gif",
                "xls":"icon_xls.gif",
                "chm":"icon_chm.gif",
                "ppt":"icon_ppt.gif",
                "pptx":"icon_ppt.gif",
                "avi":"icon_mv.gif",
                "rmvb":"icon_mv.gif",
                "wmv":"icon_mv.gif",
                "flv":"icon_mv.gif",
                "swf":"icon_mv.gif",
                "rm":"icon_mv.gif",
                "exe":"icon_exe.gif",
                "psd":"icon_psd.gif",
                "txt":"icon_txt.gif",
                "jpg":"icon_jpg.gif",
                "png":"icon_jpg.gif",
                "jpeg":"icon_jpg.gif",
                "gif":"icon_jpg.gif",
                "ico":"icon_jpg.gif",
                "bmp":"icon_jpg.gif"
            };

        return webPath + '/cap/bm/common/cui/js/uedit/dialogs/attachment/fileTypeImages/' + (maps[ext] ? maps[ext] : maps['txt']);
    }
	
	/**
	 * CapAttachment 对象
	 */
	function CapAttachment (elem) {
		
		this.$elem = $(elem);
		this.fileNum = 0;
		var opt = {};
		for (var i = 0; i < optKey.length; i++) {
			opt[optKey[i]] = this.$elem.attr(optKey[i]);
		}
		
		this.opt = $.extend(opt,dafault_opt);
		if(this.opt.uploadKey !== null || this.opt.uploadKey !== undefined || this.opt.uploadKey !== '') {
			this.init();
		}else {
			throw new Error('未指定uploadKey.');
		}
	}

	CapAttachment.prototype = {
		init: function () {
			this.createHtml();
			this.$elem.data('attachment-data', this);
		},
		createHtml: function () {
			var me = this;
			var $listUi = me.$listUi = $("<ui/>");
			$listUi.wrap('<div class=""></div>');
			
			//使用dwr查询对应数据
			dwrAction.getFileNames(me.opt.uploadKey, me.opt.uploadId, function (fileNameArray) {
				if(fileNameArray && fileNameArray.length > 0) {
					me.fileNum = fileNameArray.length;
					for (var i = 0; i < fileNameArray.length; i++) {
						me.appendAttachmentHtml({'fileName': fileNameArray[i]});
					}
				}
			});
			me.$elem.append($listUi);
			me.$elem.append('<input type="file"/>');

			//文件列表绑定下载、删除事件
			$listUi.on('click', 'li', function(event) {
				event.preventDefault();
				if($(event.target).data('action-type') === 'download') {		//点击名字就下载
					me.downloadAttachment(event.currentTarget);
				}else if($(event.target).data('action-type') === 'delete'){		//点击删除
					me.removeAttachment(event.currentTarget);
				}
			});
			
			//绑定上传事件
 			me.$elem.on('change', 'input[type="file"]', function(event) {
 				event.preventDefault();
 				me.uploadAttachment(event.currentTarget);
 			});
		},

		/**
		 * 上传附件
		 * @param  fileElem 附件元素
		 */
		uploadAttachment: function (fileElem) {
			var $fileElem = fileElem instanceof jQuery ? fileElem : $(fileElem);
			var me = this;
			//dwr调用
			g.dwr.TOPEngine.setAttributes({'uploadKey':this.opt.uploadKey,'uploadId':this.opt.uploadId});
			dwrAction.uploadFile(fileElem, function (loadFile) {
				if(loadFile) {
					//第一次上传需要保存uploadId
					if(!me.opt.uploadId) {	
						me.opt.uploadId = loadFile.uploadId;
						me.$elem.attr('uploadId', me.opt.uploadId);
					}
 					me.appendAttachmentHtml({'fileName': loadFile.fileName});
 				}
				
			});
			g.dwr.TOPEngine.setAttributes(null);

		}, 

		/**
		 * 增加附件信息到列表		
		 * @param attachment 附件信息
		 */
		appendAttachmentHtml: function (attachment) {
			if(attachment) {
				var $li = $('<li style="list-style-type: none;"></li>');
				$li.append('<image style="vertical-align: middle; margin-right: 2px;" src="' + getFileIcon(attachment.fileName) + '"><a href="###" data-action-type="download">' + attachment.fileName + '</a>&nbsp;&nbsp;<a href="###" style="color: hsla(13, 100%, 50%, 0.77);" data-action-type="delete">删除</a>');
				$li.data('attachment', attachment);
				this.$listUi.append($li);
				this.fileNum++;
				this._checkMode();
			}
		},

		_checkMode: function () {
			if(this.opt.mode === "Single") {
				var $inputFile = this.$elem.find('input[type="file"]');
				this.fileNum === 1 ? $inputFile.hide(): $inputFile.show();
			}
		},

		/**
		 * 删除附件
		 */
		removeAttachment: function (elemLi) {
			var $elemLi = elemLi instanceof jQuery ? elemLi : $(elemLi);
			var attachment = $elemLi.data('attachment');
			if(attachment) {
				var me = this;
				dwrAction.deleteFile(this.opt.uploadKey,this.opt.uploadId,attachment.fileName, function (result) {
					console.log(result);
					if(result) {
						elemLi.remove();
						me.fileNum--;
						me._checkMode();
 					}else {
 						throw new Error('error delete file');
 					}
				});
			}
		},

		/**
		 * 获取uploadId
		 * @return {[type]} [description]
		 */
		getUploadId: function () {
			return this.opt.uploadId;
		},

		downloadAttachment: function (elemLi) {
			var $elemLi = elemLi instanceof jQuery ? elemLi : $(elemLi);
			var attachment = $elemLi.data('attachment');
			if(attachment) {
				dwrAction.downloadFile(this.opt.uploadKey,this.opt.uploadId,attachment.fileName, function (data) {
					g.dwr.TOPEngine.openInDownload(data);
				});
			}
		},  
	};

})(window, jQuery);