jQuery EasyUI 附件扩展组件attachmentbox

<input class="easyui-attachmentbox"/>

页面上的附件上传功能，既想上传附件，又想上传之后能下载，保存之后重新访问页面仍然还能显示。

先贴代码如下（各位凑合着└(^o^)┘）：

注册自定义组件attachmentbox：

$.parser.plugins.push("attachmentbox");/*注册自定义组件*/

用的时候创建一个单独的JS文件引用就行（依赖于jQuery Easyui）。

$(function(){
	/*
	 * 创建附件相关标签
	 */
	function createAttachmentBox(target){
		var opts = $.data(target, 'attachmentbox').options;
		$(target).val(opts.value);
		$(target).hide();
		
		var attachmentbox;
		var filedisplay;
		var filetitle;
		var filedown;
		var fileup;
		var fileclear;
		if($(target).next().hasClass("attachmentbox")){
			attachmentbox = $(target).next();
			filedisplay = attachmentbox.find(".attachmentbox-display");
			filetitle = attachmentbox.find(".attachmentbox-title");
			filedown = attachmentbox.find(".attachmentbox-down");
			fileup = attachmentbox.find(".attachmentbox-up");
			fileclear = attachmentbox.find(".attachmentbox-clear");
		}else{
			attachmentbox = $("<span class='attachmentbox'></span>").insertAfter($(target));
			filedisplay = $("<img class='attachmentbox-display' alt='图片展示'></img>").appendTo(attachmentbox);
			filetitle = $("<span class='attachmentbox-title'></span>");
			filedown = $("<a class='attachmentbox-down' href='javascript: void(0);'></a>").append(filetitle).appendTo(attachmentbox);
			fileup = $("<a class='attachmentbox-up attachmentbox-button'></a>").appendTo(attachmentbox);
			fileup.linkbutton(opts.button.upload);
			fileclear = $("<a class='attachmentbox-clear attachmentbox-button'></a>").appendTo(attachmentbox);
			fileclear.linkbutton(opts.button.clear);
		}
		
		if(opts.valueurl){
			var file = [];
			$.ajax({
				url: opts.valueurl,
				async: false,
				dataType: 'json',
				success: function(data){
					file = data;
				}
			});
			if(file.length > 0){
				$.extend(opts, {varibles: $.extend(true,{},opts.varibles,file[0])});
				
				setFilename(target,file[0].filename);
				setFileDownloadurl(target,"/GrantService/FileDownLoad/download.do?ID="+file[0].id);
				if(opts.isImgDisplay){
					display(target);
				}
			}
		}
		
		if(opts.isImgDisplay){
			filedisplay.show();
			var width = 100;
			var height = 100;
			if(opts.imgSize && opts.imgSize.length > 0){
				width = opts.imgSize[0];
				if(opts.imgSize.length > 1){
					height = opts.imgSize[1];
				}
			}
			filedisplay.prop("width",width);
			filedisplay.prop("height",height);
		}else{
			filedisplay.hide();
		}
		
		if(opts.downloadable){
			filedown.bind("click",function(){
				$(target).attachmentbox("download");
			});
		}else{
			filedown.unbind("click");
		}
		if(opts.uploadable){
			fileup.show();
		}else{
			fileup.hide();
		}
		if(opts.clearable){
			fileclear.show();
		}else{
			fileclear.hide();
		}