该博客介绍了如何使用jQuery EasyUI扩展一个名为attachmentbox的组件，用于实现页面上的附件上传和下载功能。通过注册自定义组件并引入相关JS文件，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();
}
opts.onLoadSuccess.call(target);
}
var winPrefix="file";//附件上传弹出框id前缀
/*
* 打开附件上传窗口
*/
function openUploadWin(target){
var opts = $.data(target, 'attachmentbox').options;
var fileUploadWindow = $("<div id='"+winPrefix+"window'></div>");
var fileUploadForm = $("<form id='"+winPrefix+"form' method='post' enctype='multipart/form-data'></form>");
var fileUploadTable = $("<table style='margin: 5px;height: 70px;'></table>");
var fileTR = $("<tr></tr>");
var fileTD = $("<td></td>");
$("<tr></tr>").append($("<td></td>").append("请选择文件"))
.append($("<td width='5px;'></td>"))
.append($("<td></td>").append($("<input id='fileUpload' name='fileUpload'>")))
.appendTo(fileUploadTable);
$("<tr></tr>").append($("<td colspan='4'></td>").append($("<span id='fileName'></span>")))
.appendTo(fileUploadTable);
$("<tr></tr>").append($("<td colspan='4'></td>").append($("<span id='fileUploadInfo'></span>")))
.appendTo(fileUploadTable);
$("<tr></tr>").append($("<td colspan='2' align='right'></td>")
.append($("<a id='uploadFile' href='javascript: void(0)'></a>").html("上传")))
.append($("<td colspan='2' align='left'></td>")
.append($("<a id='cancelUpload' href='javascript: void(0)'></a>").html("关闭")))
.appendTo(fileUploadTable);
fileUploadForm.append(fileUploadTable).appendTo(fileUploadWindow);
$(document.body).append(fileUploadWindow);
var height = 160;
var width = 400;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var winHeight = $(window).height() || document.body.clientHeight;
var winWidth = $(window).width() || document.body.clientWidth;
var winTop = (Math.max((winHeight-height)/2,0)+scrollTop);
var winLeft = (Math.max((winWidth-width)/2,0)+scrollLeft);
var startUploadFile = function(){
$("#uploadFile").linkbutton("disable");
$(target).attachmentbox("upload",fileUploadForm);
$("#uploadFile").linkbutton("enable");
};
var closeUploadFile = function (){
$("#fileUpload").val("");
$("#fileName").html("");
$("#fileUploadInfo").html("");
$("#"+winPrefix+"window").dialog("destroy");
};
fileUploadWindow.window({
title: "文件上传",
collapsible: false,
minimizable: false,
maximizable: false,
top: winTop+"px",
left: winLeft+"px",
width: width+"px",
height: height+"px",
zIndex: $.fn.window.defaults.zIndex++,
padding: "2px",
modal: true,
onClose: function(){
$(this).dialog("destroy");
}
});
fileUploadForm.form({
url: opts.uploadurl
});
$("#fileUpload").filebox({
width: "260px",
accept: opts.isImgDisplay?opts.imgSuffix: opts.fileSuffix,
required: true
});
$("#uploadFile").linkbutton({
iconCls: "icon-ok",
onClick: startUploadFile
});
$("#cancelUpload").linkbutton({
iconCls: "icon-cancel",
onClick: closeUploadFile
});
}
$.fn.attachmentbox = function(options, param){
if (typeof options == 'string'){
return $.fn.attachmentbox.methods[options](this, param);
}
options = options || {};
return this.each(function(){
var state = $.data(this, 'attachmentbox');
if (state){
$.extend(state.options, options);
} else {
$.data(this, 'attachmentbox', {
options: $.extend({}, $.fn.attachmentbox.defaults, $.fn.attachmentbox.parseOptions(this), options)
});
}
createAttachmentBox(this);
});
};
/*
* 设置附件名称
*/
function setFilename(target,param){
if(typeof param == "string"){
$(target).next().find(".attachmentbox-title").html(param);
}
}
/*
* 设置附件上传地址
*/
function setFileUploadurl(target,param){
var opts = $.data(target, 'attachmentbox').options;
if (param){
$.extend(opts, {uploadurl: param});
}
}
/*
* 设置附件下载地址
*/
function setFileDownloadurl(target,param){
var opts = $.data(target, 'attachmentbox').options;
if (param){
$.extend(opts, {downloadurl: param});
}
}
/*
* 上传附件
*/
function upload(target,form){
var opts = $(target).attachmentbox("options");
if(opts.onBeforeUpload.call(target) == false){return;}
onload('请稍候。。。');
form.form("submit",{
onSubmit: function(param){
$.extend(param,opts.varibles);
var isValid = $(this).form('validate');
return isValid;
},
success: function(filelist){
disOnload();
try{
var data = JSON.parse(filelist);
if(data.length > 0){
var opts = $(target).attachmentbox("options");
var varibles = $.extend(true,{},opts.varibles,data[0]);
$(target).attachmentbox("setFilename",data[0].filename);
// $(target).val(data[0].attachmentcode);
$(target).attachmentbox({varibles: varibles,value: data[0].attachmentcode});
// $(target).attachmentbox("setFileDownloadurl",opts.downloadurl+"?ID="+data[0].id);
opts.onAfterUpload.call(target);
display(target);
$.messager.alert("提示","文件上传成功!","info");
$("#"+winPrefix+"window").dialog("destroy");
}else{
$.messager.alert("错误","文件上传失败 !","error");
}
}catch(e){
$.messager.alert("错误",filelist,"error");
}
}
});
}
/*
* 如果附件是图片并且允许展示，展示图片
*/
function display(target){
var opts = $.data(target, 'attachmentbox').options;
var img = $(target).next().find(".attachmentbox-display");
img.prop("src",opts.downloadurl);
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];
}
}
img.prop("width",width);
img.prop("height",height);
}
/*
* 取消图片展示
*/
function cancelDisplay(target){
var img = $(target).next().find(".attachmentbox-display");
img.hide();
}
/*
* 清除图片
*/
function clearImg(target){
var img = $(target).next().find(".attachmentbox-display");
img.prop("src","");
}
/*
* 下载附件
*/
function download(target){
var opts = $.data(target, 'attachmentbox').options;
if(opts.onBeforeDownload.call(target) == false){return;}
window.open(opts.downloadurl);
opts.onAfterDownload.call(target);
}
/*
* 清理附件
*/
function clear(target){
var opts = $.data(target, 'attachmentbox').options;
if(opts.onBeforeClear.call(target) == false){return;}
//清除附件编码
$(target).val("");
//清除文件名显示
setFilename(target,"");
//清除图片展示
clearImg(target);
opts.onAfterClear.call(target);
}
$.parser.plugins.push("attachmentbox");/*注册自定义组件*/
/*
* 附件控件的方法
*/
$.fn.attachmentbox.methods = {
options: function(jq){
return $.data(jq[0], 'attachmentbox').options;
},
disable: function(jq){
return jq.each(function(){
$(this).attachmentbox({uploadable: false,downloadable: false,clearable: false});
});
},
enable: function(jq){
return jq.each(function(){
$(this).attachmentbox({uploadable: true,downloadable: true,clearable: true});
});
},
uploadable: function(jq,value){
if(value != false){
value = true;
}
return jq.each(function(){
$(this).attachmentbox({uploadable: value});
});
},
downloadable: function(jq,value){
if(value != false){
value = true;
}
return jq.each(function(){
$(this).attachmentbox({downloadable: value});
});
},
clearable: function(jq,value){
if(value != false){
value = true;
}
return jq.each(function(){
$(this).attachmentbox({clearable: value});
});
},
setFilename: function(jq,value){
return jq.each(function(){
setFilename(this,value);
});
},
setFileUploadurl: function(jq,value){
return jq.each(function(){
setFileUploadurl(this,value);
});
},
setFileDownloadurl: function(jq,value){
return jq.each(function(){
setFileDownloadurl(this,value);
});
},
upload: function(jq,form){
return jq.each(function(){
upload(this,form);
});
},
download: function(jq){
return jq.each(function(){
download(this);
});
},
clear: function(jq){
return jq.each(function(){
clear(this);
});
}
};
$.fn.attachmentbox.parseOptions = function(target){
var t = $(target);
return $.extend({}, $.parser.parseOptions(target, ['uploadable','downloadable','clearable']), {
uploadable: (t.attr('disabled') ? false : undefined),
downloadable: (t.attr('disabled') ? false : undefined),
clearable: (t.attr('disabled') ? false : undefined)
});
};
/*
* 附件控件的属性默认值
*/
$.fn.attachmentbox.defaults = {
filename: '',
varibles: {},
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: '',//可上传文件后缀（为空时不限定上传）
button: {
upload: {
iconCls: 'icon-upload',
iconAlign: 'left',
text: '上传',
onClick: function(){
openUploadWin(this.parentNode.previousSibling);
}
},
clear: {
iconCls: 'icon-remove',
iconAlign: 'left',
text: '清除',
onClick: function(){
var target = $(this).parents(".attachmentbox").prev();
$(target).attachmentbox("clear");
}
}
},
onBeforeUpload: function(){},
onBeforeDownload: function(){},
onBeforeClear: function(){},
upload: function(){},
download: function(){},
clear: function(){},
onAfterUpload: function(){},
onAfterDownload: function(){},
onAfterClear: function(){},
onLoadSuccess: function(){}
};
});
属性：
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){} /*设置文件下载地址*/
扫一扫
1662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
