jQuery 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 = $("").insertAfter($(target));
filedisplay = $("![图片展示]()
").appendTo(attachmentbox);
filetitle = $("");
filedown = $("").append(filetitle).appendTo(attachmentbox);
fileup = $("").appendTo(attachmentbox);
fileup.linkbutton(opts.button.upload);
fileclear = $("").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();
}
opts.onLoadSuccess.call(target);
}
var winPrefix="file";//附件上传弹出框id前缀
/*
* 打开附件上传窗口
*/
function openUploadWin(target){
var opts = $.data(target, 'attachmentbox').options;
var fileUploadWindow = $("");
var fileUploadForm = $("");
var fileUploadTable = $("
");
var fileTR = $("属性：
varibles: {
// filetype: 'normal' /*一般文件*/
}, /*一起传到后台的额外的参数（比如文件分类信息等）*/
uploadable: true, /*是否可以上传*/
downloadable: true, /*是否可以下载*/
clearable: true, /*是否可以清除*/
uploadurl: '', /*附件上传地址*/
downloadurl: '', /*附件下载地址*/
valueurl: '', /*附件回显地址*/
value: '', /*附件编码*/
isImgDisplay: false, /*附件图片是否显示*/
imgSize: [100,100], /*isImgDisplay为true时有效，图片显示尺寸（为空时，自适应）*/
imgSuffix: 'image/jpg,image/gif,image/png', /*isImgDisplay为true时有效，可上传图片文件后缀*/
fileSuffix: ''事件：
onBeforeUpload: function(){} /*上传前，返回false时不进行上传*/
onBeforeDownload: function(){} /*下载前，返回false时不进行下载*/
onBeforeClear: function(){} /*清除前，返回false时不进行清除*/
onAfterUpload: function(){} /*上传后，无返回值*/
onAfterDownload: function(){} /*下载后，无返回值*/
onAfterClear: function(){} /*清除后，无返回值*/
onLoadSuccess: function(){} /*渲染后，无返回值*/方法：
options: function(){} /*获取属性信息*/
disable: function(){} /*禁用上传下载功能*/
enable: function(){} /*启用上传下载功能*/
uploadable: function(value){} /*设置是否可以上传，boolean型参数*/
downloadable: function(value){} /*设置是否可以下载，boolean型参数*/
clearable: function(value){} /*设置是否可以清除，boolean型参数*/
setFilename: function(value){} /*设置文件显示名（链接名）*/
setFileUploadurl: function(value){} /*设置文件上传地址*/
setFileDownloadurl: function(value){} /*设置文件下载地址*/