Easyui-fileUpload使用手册V1.6.4

系统教程570 更新时间：2026-04-04 09:30:54

2024年2月9日发(作者：)

日期

2016.4.22

2016.4.27

版本

V1.1

V1.2

说明

基于jqueryui框架编写的通用文件上传

1.修复：

.提示已存在的文件，上传时也上传了

.可以用金格控件打开的文件,提示不能打开

2.优化：

.默认打开input file的multiple属性，支持ctrl选择多个文件上传

.添加autoCloseOnEsc属性，true：esc关闭窗口

.修改部分提示信息样式，对里面的重要内容添加颜色以区分

2016.4.29 V1.3

优化：

.已上传的文件，上传按钮禁用。

.如果文件后缀没有指定时，则可以选择任何文件。

.解决用JS初始化时，回显表格size无法铺满容器，高度无法显示所有记录，宽度不能到100%。

添加：

1.添加通过触发按钮弹出窗口（文件选择）。

2.上传文件回显可以自定义，由参数控制是否使用自动生成的datagrid显示。

3.添加方法：获得已经上传的文件信息[getUploadFiles]

4.添加方法：刷新文件回显表格[reloadFileGrid]

5.添加属性： echoType

文件上传后，回显方式选择，默认：1

1：在当前容器下生成datagrid表格，提供“添加、修改、删除、查看、下载”等功能，可以通过参数对按钮权限进行配置。

2：以文件名列表形式展示，一个文件名称就是一行

3：不回显，根据控件提供的方法（getUploadFiles详见使用手册），自己定义回显样式

6.添加属性：fileWrap

echoType = 2, 文件是否换行， true：一个文件一行， false：都在一行

7.文件上传完毕后，回显方式增加以menuButton形式显示。

2016.5.3 V1.4.

1.添加属性：uploadFace 上传界面类型，

0：（默认）弹出dialog窗口和表格；

1：直接选择上传文件；

2.添加方法：刷新回显文件 - menubutton 形式 [reloadFileMenuBtn]

参数：queryParams， json类型

3.添加方法：reloadFile，刷新回显文件，根据echoType的值，自动去判断回显方式[reloadFile]

参数：queryParams， json类型

tton形式的回显文件，删除时confirm确认后再删除。

屈福兴

编写

屈福兴

2015.5.4 V1.5

1.添加属性：

draggable：窗口是否可以拖拽，默认：false,

zIndex ：窗口层的zIndex，默认为9999999

2.添加属性：zipFile 下载时，是否压缩文件，仅限于下载单个文件时，多个文件下载，只能放在zip压缩包中。

下载时文件默认为下载文件的名称，也可以通过控件属性指定（zipPackageName）

true: 压缩文件；false:不压缩文件；默认：false

3.添加属性：shadow

弹出窗口 - 如果设置为true，在窗体显示的时候显示阴影.

4.添加属性: msgAlign

消息位置'top, bottom', 默认：'bottom'

5.添加方法：设置控件的属性property

参数：key ：可以为String，或者json 对象

value：String

使用：

1.$('#objId').fileUpload('property','fileGuid','-1');

2.$('#objId').fileUpload('property',{

'fileGuid':'-1',

'msgAlign':'bottom'

});

6.添加事件：onDeleteFile 删除文件前调用

参数：fileIdList 数组类型[], 里面为选择的文件fileId

返回：boolean true:执行删除， false：终止删除

7. onDeleteFileSuccess 删除成功后调用

参数：

data json类型｛type:'info/error', msg:'删除成功！'｝,

fileIdList 数组类型[], 里面为选择的文件fileId

屈福兴

2016.5.5 V1.6

优化：

1.编辑按钮显示时，查看按钮就默认隐藏掉。如果编辑按钮隐藏，则查看按钮根据配置是否隐藏。

修复：

属性无法控制添加按钮是否显示。

2.控件多次调用时，只用第一次时初始化，以后都是更新配置参数。

屈福兴

2016.5.6 V1.6.1

优化：

1.根据“附件”td，回显表格所在td，页面宽度，自动计算分配宽度，防止附件td被挤压；

2.添加属性: cbGridPrevTdWidth, 回显为grid表格时，附件所在td的前一个td的宽度, 单位可以是%或者px

屈福兴

2016.5.16

V1.6.2

默认: cbGridPrevTdWidth:'15%'

添加方法:addmenutiem （echoType=2）回显为menubutton时，为menubutton添加自定义条目

屈福兴

2016.5.16 V1.6.3

1.优化office文件打开方法，使之适用IE8，打开后根据屏幕分辨率最大化.

.优化文件上传时，文件大小计算方法，适合IE8 - 11，

IE9以下版本，对于浏览器不能调用activex计算文件大小的，给出提示。

.优化预览文件datagrid列宽，文件路径太长时使用省略号代替。

2.添加属性：loadtime 默认false, 显示控件加载时间(单位：秒，只有第一次加载时显示)

添加属性：excludeSuffixs 不能上传的文件类型， excludeSuffixs不为空时，suffixs失效

添加属性：forceCheck 强制上传文件大小检查，如果不符合则不能上传, 默认：false

屈福兴

添加属性：spaceSumibtFiles space空格键上传文件, 默认：true

2016.5.19

V1.6.4

添加属性 localViewFile 预览界面的文件，是否可以调用本地office打开查看 , Booleantrue：可以打开

屈福兴

1.例子

Demo1:公共组件例子

JS引入：

Html：

data-options=”fileGuid:-1, // 业务附件对应的guid，必填

isAdd:true, //设置按钮的权限，默认：true

isEdit:true, //默认：true

isDel:true, //默认：true

isView:true, //默认：true

isDownload:true, //默认：true

isdebug:true, //默认：true

class=”easyui-fileUpload”>

Demo2：年度计划

JSP：

pagesplanyearedit_

Demo3: menubutton回显文件

Demo4：简单文件上传（上传界面简化）

Demo5：简单文件上传2（上传界面简化）

2.属性列表

属性名

isdebug

autoCloseOnEsc

triggerId

suffixs

maxFileCount

maxSingleFileSize

fileDialog

fileDatagrid

submitFileForm

msgShowType

msgAlign

msgTimeout

fileGridTitle

submitFilesUrl

deleteFilesUrl

downloadFilesUrl

editFileUrl

zipPackageName

closeAfterUpload

clearCache

dialogOptions

描述

控件出错时是否输出调试信息

键盘ESC键关闭打开窗口

触发控件容器ID，会自动给它添加click事件，单击后会打开上传文件窗口

上传文件类型

最大上传文件个数，默认：10个

10240K

弹出窗口dom对象

弹出窗口里文件列表对dom象（datagrid控件）

提交file用的form表单

消息显示方式 1:弹出， 2：窗口里面提示， 3：1,2都有, 默认：2

消息位置'top, bottom'

默认：top

消息超时时间，单位毫秒，默认：5000，5000

即：5s

回显表格文件title

文件上传保存对应的url

删除文件对应的URL

下载文件对应的URL

编辑文件对应的URL

下载文件ZIP压缩包名称

上传完毕后关闭窗口

打开时是否清空上次的上传记录

弹出窗口默认参数

文件列表

top

2

false

true

空

默认值类型

boolean

string

wps,doc,docx,xls,xlsx,zip,rar,txt,jpg,bmp

10

string

数字

dom

string

数字

string

boolean

json

string

单位文件最大size(单位K)，默认10M =

51200

/ais/commonPlug/

/ais/pages/commons/file/?fileId=

附件压缩包.zip

false

true

{

title: "通用文件上传",

resizable:true,

collapsible:true,

closed:true,

modal:true,

iconCls:'icon-import'

}

helpMsg

文件上传说明-帮助说明通用文件上传，支持对类型、大小、数量、重复文件的检查，支持多文件上传

fileGuid

isAdd

isEdit

isDel

isView

isDownload

fileCallbackGridUrl

callbackGridParams

具体业务对应附件的guid

是否可以添加附件

是否可以编辑附件

是否可以删除附件

是否可以查看附件

是否可以下载附件

回显表格查询URL

回显表格查询参数

true

/ais/commonPlug/

{query_eq_guid:'',

boName :'FileBean',

pkName :'fileId'}

string

boolean

string

json

editFileType

金格控件可以编辑的文件类型

[

"application/-excel","xls",

"application/msword","doc",

"application/nt","docx",

"application/","xlsx",

"application/-works","wps"

]

array

callbackGridHeight

showCbFilesGrid

maxQueryFiles

echoType

回显表格的高度（默认只正好显示5条记录）

是否生成回显文件表格, 特殊情况下可以自定义回显表格

回显时，一次最大查询出的文件数

文件上传后，回显方式选择，默认：1

1：在当前容器下生成datagrid表格，提供“添加、修改、删除、查看、下载”等功能，可以通过参数对按钮权限进行配置。

2：以文件名列表形式展示，一个文件名称就是一行（通过fileWrap设置是否换行）

3：不回显，根据控件提供的方法（getUploadFiles详见使用手册），自己定义回显样式

250

true

20

1

数字

boolean

数字

fileWrap

uploadFace

echoType = 2, 文件是否换行， true：一个文件一行， false：都在一行

上传界面类型，

0：（默认）弹出dialog窗口和表格；

1：直接选择上传文件；

true

0

boolean

数字

draggable

shadow

zIndex

zipFile

窗口是否可以拖拽，默认：false,

弹出窗口 - 如果设置为true，在窗体显示的时候显示阴影

窗口层的zIndex，默认为9999999

下载时，是否压缩文件，仅限于下载单个文件时，多个文件下载，只能放在zip压缩包中。

下载时文件默认为下载文件的名称，也可以通过控件属性指定（zipPackageName）

true: 压缩文件；

false:不压缩文件；默认：false

true

false

9999999

false

boolean

数字

boolean

cbGridPrevTdWidth

回显为grid表格时，附件所在td的前一个td的宽度，单位可以是%或者px

Eg:cbGridPrevTdWidth:'15%'

cbGridPrevTdWidth:'150px'

15%， 150px

px , %

loadtime

excludeSuffixs

forceCheck

spaceSumibtFiles

localViewFile

显示控件加载时间(单位：秒，只有第一次加载时显示)

不能上传的文件类型， excludeSuffixs不为空时，suffixs失效

强制上传文件大小检查，如果不符合则不能上传, 默认：false

空格键上传文件, 默认：true

预览界面的文件，是否可以调用本地office打开查看

false

true

false

boolean

string

boolean

3.事件

事件名

onBeforeOpen

onOpen

onBeforeClose

onClose

onFileSubmit

onFileSubmitSuccess

调用dialog的方法

在文件提交之前触发，返回false可以终止提交

文件上传成功后回调函数， data为上传文件的数据 data:{

filename:’, ’,

fileId:’1,2,3’

}

onDeleteFile 删除文件前调用

参数：fileIdList，数组类型[], 里面为选择的文件fileId

返回：boolean，true:执行删除false：终止删除

onDeleteFileSuccess 删除成功后调用

参数：

data json类型｛type:'info/error', msg:'删除成功！'｝,

fileIdList 数组类型[], 里面为选择的文件fileId

data, fileIdList

fileIdList

描述参数

target, options

options

data, options

4.方法

方法名

options

getUploadFiles

获得配置属性

获得已经上传的文件信息【getUploadFiles】

参数:queryParams, json类型,

如果没有指定查询条件，则使用默认回显表格查询参数ckGridParams，

ckGridParams:{

query_eq_guid:'',

boName :'FileBean',

pkName :'fileId'

}

如果指定查询条件，则会用新的查询条件覆盖callbackGridParams（相同项覆盖extends）

例如：

$(fileUploadObj).fileUpload('getUploadFiles', {

query_like_fileName:'法规' // 主要针对FileBean的属性进行查询

});

返回值：json类型

{ total:2,

initPage:1,

initPageSize:10,

type:'success',

rows:[{

'fileId':uuid,

'fileName':'',

'fileTime':'2016-04-28 13:19:06',

'uploader_name':'管理员',

'fileEditTime' :'2016-04-28 13:19:06',

'remark_name':'管理员'

},{....}]

}

reloadFileGrid 刷新文件回显表格

参数：queryParams， json类型，参见方法：getUploadFiles

reloadFileMenuBtn 刷新回显文件 - menubutton 形式 [reloadFileMenuBtn]

参数：queryParams， json类型，参见方法：getUploadFiles

reloadFile 刷新回显文件，根据echoType的值，自动去判断回显方式

参数：queryParams， json类型

property 设置控件的属性

参数：

key ：可以为String，或者json 对象

value：String

Key, value

queryParams

描述

none

queryParams

参数

使用：

1.$('#objId').fileUpload('property','fileGuid','-1');

2.$('#objId').fileUpload('property',{

'fileGuid':'-1',

'msgAlign':'bottom'

});

addmenutiem （echoType=2）回显为menubutton时，为menubutton添加自定义条目

eg: // 第一种写法, 添加多个menu条目

$('#objId').fileUpload('addmenutiem',[{

text:'发送消息',

iconCls:'icon-msg',

handler:function( fileId, fileName){

// 自定义响应函数 fileId：选中文件ID，fileName：选中文件的名称

}

},{

text:'发送邮件',

iconCls:'icon-email',

handler:function(fileId, fileName){}

}]);

$('#objId').fileUpload('addmenutiem',{

text:'自定义按钮',

iconCls:'icon-ok',

handler:function(fileId, fileName){}

});

// 第二种写法, 添加单个menu条目

$('#upload07').fileUpload('addmenutiem',{

handler:function(fileId, fileName){

alert(" }

});

自定义nfileId="+fileId+"nfileName="+fileName);

[{},{}]

或者

参数：itemArray 数组，里面的每个元素为一个json对象｛｝ {}

本文发布于:2024-02-09，感谢您对本站的认可！

本文链接:https://www.fzithome.com/xitong/1707436833a254874.html

Easyui-fileUpload使用手册V1.6.4

发布评论取消回复

最近发表

相关推荐

标签列表

Easyui-fileUpload使用手册V1.6.4

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复