文件上传

简介

文件上传控件用于提供文件上传功能,其由两部分组成,一部分是核心的上传操作,另一部分是上传控件的界面

使用方法

2.1 静态框架使用方法仅EAS7.5版本

<wafctrl:fileupload id="upload" name="upload" url="/fileUploadDemo/upload.do?method=initalize"/>

2.2 JS动态创建 EAS8.0+

var options = {id:"fileUpload1",style:"height:50px"};
var dom = waf.createDOM("fileUpload", options);
waf.appendDOM(waf("body"), dom);
waf.initComponent("fileUpload", options, dom);

2.3 通用DOM创建 EAS8.0+

<div id="tmpID" name="tmpName" class="ui-fileupload ui-widget ui-corner-all" ctrlrole="fileUpload" aria-disabled="false" style="" data-domcreated="true">
    <div class="ui-fileupload-files cf">
        <ul class="ui-fileupload-list"></ul>
    </div>
    <div class="ui-fileupload-buttonbar">
        <span class="ui-fileupload-addFile">
            <a>添加文件</a>
            <input type="file" name="files[]" class="ui-fileupload-input">
        </span>
    </div>
</div>

<!--DOM创建好之后，使用js初始化控件-->
$("#id").wafFileUploadUI(options);

2.4 方法&事件使用 EAS7.5+

//调用方法
waf("#id").wafFileUploadUI('method', parameter...);

//eg:更改事件
waf("#id").wafFileUploadUI("option","onchange",fn);

属性说明

acceptFileTypes String 缺省值: “/.+$/i” EAS7.5+

使用正则表达式定义允许上传的文件类型

autoUpload Boolean 缺省值: false EAS7.5+

定义选择文件后是否自动上传

cancelUrl String 缺省值: null EAS7.5+

定义请求取消文件的地址

disabled Boolean 缺省值: false EAS7.5+

定义控件是否不可用

forceIframeTransport Boolean 缺省值: false EAS7.5+

定义是否强制使用iframe方式上传文件

height String 缺省值: null EAS7.5+

定义上传控件的高度

hidden Boolean 缺省值: false EAS7.5+

定义上传控件是否隐藏

id(ID) String 缺省值: null 不可以在运行期改变 EAS7.5+

定义文件上传控件的id

maxFileSize Integer 缺省值: null EAS7.5+

定义单个上传文件大小的上限

maxNumberOfFiles Integer 缺省值: null 不可以在运行期改变 EAS7.5+

定义上传文件的最大个数

minFileSize Integer 缺省值: null EAS7.5+

定义单个上传文件大小的下限

multiSelect Boolean 缺省值:false EAS7.5+

定义添加文件时是否可以多选

name String 缺省值: null 不可以在运行期改变 EAS7.5+

定义文件上传控件的名称

progressInterval Integer 缺省值: 1000 EAS7.5+

定义上传进度监听的间隔,单位为毫秒

progressUrl String 缺省值: “/（context）/fileUpload/progress.do?method=initalize” EAS7.5+

定义上传进度监听的地址,只对iframe上传方式起作用.

sequentialUploads Boolean 缺省值: false EAS7.5+

定义是否顺序上传文件

style String 缺省值: null EAS7.5+

定义上传控件的式样

tagClass String 缺省值: null EAS7.5+

定义上传控件的式样类

url String 缺省值: null EAS7.5+

定义文件上传的地址

width String 缺省值: null EAS7.5+

定义上传控件的宽度

方法说明

disable 参数: (none) 返回值类型: (none) EAS7.5+

禁用文件上传控件.[参考样例]

enable 参数: (none) 返回值类型: (none) EAS7.5+

启用文件上传控件.[参考样例]

downloads 参数: (downloads) 返回值类型: (none) EAS7.5+

添加下载列表数据.[参考样例]

参数说明：
- downloads : Array -下载列表的信息,数据的格式如下：[{“name”:”文件名称”,”size”:文件大小,”url”:”文件下载URL”,”delete_url”:”文件删除地址”,”delete_type”:”删除时提交的类型(get/post)”},{…}]
返回值说明：无

option 参数: (property[,value]) 返回值类型: (any) EAS7.5+

获得或设置F7控件某属性的值，当value参数存在时，设置控件的property属性值，且无返回值，否则返回控件的property属性值[参考样例]

参数说明：
- property-必要参数，F7控件的属性
- value-可选参数，F7控件的属性值
返回值说明：
- 当value参数不存在时，有返回值，该返回值为与property对应的属性值，可以是任意类型的javascript对象。

事件说明

beforeAdd 参数: (event,data) 返回值类型: (Boolean) EAS7.5+

添加文件前触发[参考样例]
参数说明：
    - event-文件添加的event
    - data-被添加文件的相关数据对象：
    - data参数说明：
        fileInput- jQuery对象-上传对应的Input控件(已不是界面上的Input控件,只供参考)
        files-Array[1]-对应上传的单个文件
        originalFiles -Array[]-如果为多选,则是全部文件的数组,否则和files相同
返回值说明：
    - 当返回值为false时,则不允许添加.

onAbort 参数: (event,data) 返回值类型: (none) EAS7.5+

取消文件时触发[参考样例]
参数说明：
    - event-文件取消的event
    - data-取消文件的相关数据对象
    - data参数说明：
        context-jQuery对象-对应文件的展示区域
        fileInput-jQuery对象-上传对应的Input控件(已不是界面上的Input控件,只供参考)
        files-Array[1]-对应上传的单个文件
        originalFiles-Array[]-如果为多选,则是全部文件的数组,否则和files相同
返回值说明：无

onAdd 参数: (event,data) 返回值类型: (none) EAS7.5+

添加文件后触发[参考样例]
参数说明：
    - event-文件添加的event
    - data-被添加文件的相关数据对象
    - data参数说明:
        context-jQuery对象-对应文件的展示区域
        fileInput-jQuery对象-上传对应的Input控件(已不是界面上的Input控件,只供参考)
        files-Array[1]-对应上传的单个文件
        originalFiles-Array[]-如果为多选,则是全部文件的数组,否则和files相同
返回值说明：无

onComplete 参数: (event,data) 返回值类型: (none) EAS7.5+

上传文件完成时触发[参考样例]
参数说明：
    - event-文件上传完成的event
    - data-上传文件的相关数据对象
    - data参数说明:
        context-jQuery对象-对应文件的展示区域
        fileInput-jQuery对象-上传对应的Input控件(已不是界面上的Input控件,只供参考)
        files-Array[1]-对应上传的单个文件
        originalFiles-Array[]-如果为多选,则是全部文件的数组,否则和files相同
返回值说明：无

onFail 参数: (event,data) 返回值类型: (none) EAS7.5+

上传文件失败时触[参考样例]
参数说明：
    - event-文件上传失败的event
    - data-上传文件的相关数据对象
    - data参数说明:
        context-jQuery对象-对应文件的展示区域
        fileInput-jQuery对象-上传对应的Input控件(已不是界面上的Input控件,只供参考)
        files-Array[1]-对应上传的单个文件
        originalFiles-Array[]-如果为多选,则是全部文件的数组,否则和files相同
返回值说明：无

onRemove 参数: (event,context) 返回值类型: (none) EAS7.5+

删除文件时触发[参考样例]
参数说明：
    - event-文件删除的event
    - context-删除文件时的ajax参数与上下文
    - data参数说明:
        context:jQuery对象-对应文件的展示区域
返回值说明：无

onSend 参数: (event,data) 返回值类型: (none) EAS7.5+

上传文件时触发[参考样例]
参数说明：
    - event-文件上传的event
    - data-上传文件的相关数据对象
    - data参数说明
        context-jQuery对象-对应文件的展示区域
        fileInput-jQuery对象-上传对应的Input控件(已不是界面上的Input控件,只供参考)
        files-Array[1]-对应上传的单个文件
        originalFiles-Array[]-如果为多选,则是全部文件的数组,否则和files相同
返回值说明：无

onStart 参数: (event) 返回值类型: (none) EAS7.5+

全局文件上传开始时触发[参考样例]
参数说明：
- event:全局文件上传开始的event
返回值说明：无

onStop 参数: (event) 返回值类型: (none) EAS7.5+

全局文件上传结束时触发[参考样例]
参数说明：
- event:全局文件上传结束的event
返回值说明：无