版本更新
var CFUpdate =
[
{
"Name" : "CFUpdate组件 0.9.3 版"
"Explain" : [
"1、增加MD5验证,服务器返回错误状态,可以自定义错误信息",
"2、修复MD5验证,服务器返回异常时,上传过程卡主的BUG问题",
"3、修复部分浏览器,选择多个文件时,列表滚动条不能及时更新状态的BUG"
]
},
{
"Name" : "CFUpdate组件 0.9.2 版"
"Explain" : [
"1、修复了设置setEventStart函数,返回felse时,停止上传,上传按钮没有显示的bug",
"2、增加了setUpLoadFrontUrl 函数设置每次上传前,前置请求",
"3、增加了setUploadFrontData 函数设置每次上传前,前置请求的回调"
]
},
{
"Name" : "CFUpdate组件 0.9.0 版"
"Explain" : [
"1、增加clear()方法,可以清理上传列表。"
]
},
{
"Name" : "CFUpdate组件 0.8.9 版"
"Explain" : [
"1、修复当请求报4xx状态错误时,组件没有正确报错的问题。"
]
},
{
"Name" : "CFUpdate组件 0.8.8 版"
"Explain" : [
"1、修复服务器报错时,图片模式下停止上传时JS报错BUG",
"2、调整setEventCompleteData() 设置回调,增加第二个参数 XMLHttpRequest 类型,解决获取请求头信息及其它系统信息",
"3、增加setPostObj() 设置,可以设置上传文件获取需要同步上传的POST数据",
"4、增加setUpdateHeader() 设置,设置上传文件时,自定义的HTTP头",
"5、增加TypeScript 调用说明文件及事例 CFUpdate.d.ts 和 example.ts"
]
},
{
"Name" : "CFUpdate组件 0.8.7 版"
"Explain" : [
"1、修复文件名中出现"."时,无法正确过滤文件的BUG。"
]
},
{
"Name" : "CFUpdate组件 0.8.6 版"
"Explain" : [
"1、MD5模式下,服务器返回 '2' 时可以 '2,xxxx',challs_flash_onCompleteData 能接收到。"
]
},
{
"Name" : "CFUpdate组件 0.8.5 版"
"Explain" : [
"1、修复中文处理方面的BUG(感谢网友:加菲猫)"
]
},
{
"Name" : "CFUpdate组件 0.8.4 版"
"Explain" : [
"1、修复服务器代码报错时,组件不能正常处理的问题",
"2、修复a.fileAccept 设置后,报错问题"
]
},
{
"Name" : "CFUpdate组件 0.8.3 版"
"Explain" : [
"1、修复a.fileNum 设置错误",
"2、兼容(http://www.bootcss.com/)Bootstrap框架,解决页面引用此框架时组件异常问题",
"3、增加了在start()时,检查update(),style(),language()是否设置",
"4、兼容了不用设置所有的回调JS函数",
"5、修复了鼠标滚轴滚动列表时,不触动浏览器滚动"
]
},
{
"Name" : "CFUpdate组件 0.8.2 版"
"Explain" : [
"1、修复了停止上传时条目状态BUG",
"2、添加了手机专用模式a.ListShowType = 6;",
"3、字库增加了ButtonTxt_5:'删 除'",
"4、样式增加了手机模式专用样式 (a.phone_*) 21条"
]
},
{
"Name" : "CFUpdate组件 0.8.1 版"
"Explain" : [
"1、修复了a.MD5File = 2 时的错误提示",
"2、添加了setEventCompleteAll设置上传文件列表全部上传完毕事件"
]
},
{
"Name" : "CFUpdate组件 0.8.0 版"
"Explain" : [
"1、支持HTML5浏览器",
"2、支持手机平板触摸模式",
"3、支持拖拽文件到组件",
"4、文件类型过滤",
"5、其它功能详见Config.js的方法说明"
]
}
]
联系方式

challs@qq.com
QQ群:37714571 144843949 166704339 验证请输入"上传组件"
调用方法 HTML代码
<script type="text/javascript" src="CFUpdate.min.js" charset="utf-8"></script>
<div id="cfupdate" ></div>
组件调用JS代码部分
var c = new CFUpdate();
//组件对象实例化
//判断浏览器是否支持组件所需CSS3 和 HTML5 特性
// if(!c.isSupport()){
// alert("浏览器不支持本组件!");
// }
//alert(c.version)
//获取版本号 返回“0.8.0”
c.style(challs_flash_style());
//设置组件样式对象
//具体challs_flash_style 方法参考 Config.js文件
c.update(challs_flash_update());
//设置组件初始化参数
//具体challs_flash_update 方法参考 Config.js文件
c.language(challs_flash_language());
//设置组件文本参数
//具体challs_flash_language 方法参考 Config.js文件
c.setEventComplete(challs_flash_onComplete,this);
//设置每次上传完成调用的函数(函数,函数里面this对象)
c.setEventCompleteData(challs_flash_onCompleteData,this);
//设置获取服务器反馈信息事件(函数,函数里面this对象)
c.setEventCompleteAll(challs_flash_onCompleteAll,this);
//设置上传文件列表全部上传完毕事件(函数,函数里面this对象)
c.setEventError(challs_flash_onError,this);
//设置上传文件发生错误事件函数(函数,函数里面this对象)
c.setAlert(challs_flash_alert,this);
//设置当提示时,会将提示信息传入函数(函数,函数里面this对象)
c.setEventStatistics(challs_flash_onStatistics,this);
//设置当组件文件数量或状态改变时得到数量统计函数(函数,函数里面this对象)
c.setEventSelectFile(challs_flash_onSelectFile,this);
//设置用户选择文件完毕触发事件函数(函数,函数里面this对象)
c.setDeleteAllFiles(challs_flash_deleteAllFiles,this);
//设置清空按钮点击时,出发事件函数(函数,函数里面this对象)
c.setEventStart(challs_flash_onStart,this);
//设置开始一个新的文件上传时事件函数(函数,函数里面this对象)
c.setPostObj(challs_post_obj,this);
//设置上传文件获取需要同步上传的POST数据(函数,函数里面this对象)
c.setUpdateHeader(challs_update_header,this);
//设置上传文件时,自定义的HTTP头(函数,函数里面this对象)
//c.setUpLoadFrontUrl(challs_update_front_url,this);
//设置每次上传前,前置请求(函数,函数里面this对象)
//c.setUploadFrontData(challs_update_front_data,this);
//设置每次上传前,前置请求的回调(函数,函数里面this对象)
c.start(document.getElementById("cfupdate"),580,508);
//组件开始运行(DIV对象,宽,高)
//可以直接设置ID名称就可以 c.start("cfupdate",580,508);
//高和宽可以设置百分比c.start("cfupdate","50%","50%");
//c.setSize(600,500);
//重新设置组件大小(宽,高)
//高和宽可以设置百分比c.setSize("50%","50%");
JS函数 challs_flash_update()
function challs_flash_update(){ //Flash 初始化函数
var a={};
//定义变量为Object 类型
a.title = "上传文件"; //设置组件头部名称
a.FormName = "Filedata";
//设置Form表单的文本域的Name属性
a.url = "http://www.access2008.cn/update/images/zh-cn/update.php";
//设置服务器接收代码文件
a.parameter = "";
//设置提交参数,以GET形式提交,例:"key=value&key=value&..."
a.typefile = "*.gif;*.png;*.jpg;*.jpeg;";
//设置可以上传文件 数组类型
//"*.gif;*.png;*.jpg"为文件扩展名列表,其中列出用户选择要上载的文件时可以看到的 Windows 文件格式,以分号相隔
a.fileAccept = "image/gif,image/png,image/jpeg";
//设置打开文件选择框过滤文件,注意:这个属性只是过滤显示,判断文件是否合法已a.typefile参数为准
//如果不限制设置为a.fileAccept = "";
//比如:"audio/*,video/*,image/*,application/zip",每个类型用逗号隔开
// [audio/*] => 显示所有的声音文件。
// [video/*] => 显示所有的视频文件。
// [image/*] => 显示所有的图像文件。
// [MIME_type] => 一个有效的 MIME 类型,不带参数。http://www.iana.org/assignments/media-types/ 获得标准 MIME 类型的完整列表
a.UpSize = 0;
//可限制传输文件总容量,0或负数为不限制,单位MB
a.fileNum = 0;
//可限制待传文件的数量,0或负数为不限制
a.size = 1;
//上传单个文件限制大小,单位MB,可以填写小数类型
a.FormID = ['select','select2'];
//设置每次上传时将注册了ID的表单数据以POST形式发送到服务器
//需要设置的FORM表单中checkbox,text,textarea,radio,select项目的ID值,radio组只需要一个设置ID即可
//参数为数组类型,注意使用此参数必须有 challs_flash_FormData() 函数支持
a.autoClose = 1;
//上传完成条目,将自动删除已完成的条目,值为延迟时间,以秒为单位,当值为 -1 时不会自动关闭,注意:当参数CompleteClose为false时无效
a.CompleteClose = true;
//设置为true时,上传完成的条目,将也可以取消删除条目,这样参数 UpSize 将失效, 默认为false
a.repeatFile = true;
//设置为true时,可以过滤用户已经选择的重复文件,否则可以让用户多次选择上传同一个文件,默认为false
a.MD5File = 1;
//设置MD5文件签名模式,参数如下 ,注意:对大文件计算时会很慢,在无特殊需要时,请设置为0
//0为关闭MD5计算签名
//1为直接计算MD5签名后上传
//2为计算签名,将签名提交服务器验证,在根据服务器反馈来执行上传或不上传
//3为先提交文件基本信息,根据服务器反馈,执行MD5签名计算或直接上传,如果是要进行MD5计算,计算后,提交计算结果,在根据服务器反馈,来执行是否上传或不上传
a.loadFileOrder=true;
//选择的文件加载文件列表顺序,TRUE = 正序加载,FALSE = 倒序加载
a.mixFileNum=0;
//至少选择的文件数量,设置这个将限制文件列表最少正常数量(包括等待上传和已经上传)为设置的数量,才能点击上传,0为不限制
a.ListShowType = 1;
//文件列表显示类型:
//1 = 传统列表显示,
//2 = 缩略图列表显示(适用于图片专用上传)
//5 = 极简模式
//6 = 手机模式(适用于手机平板)
//
//3,4(保留暂无效果)
a.TitleSwitch = true;
//是否显示组件头部
a.ForceFileNum = 0;
//强制条目数量,已上传和待上传条目相加等于为设置的值(不包括上传失败的条目),否则不让上传, 0为不限制,设置限制后mixFileNum,autoClose和fileNum属性将无效!
a.autoUpload = false;
//设置为true时,用户选择文件后,直接开始上传,无需点击上传,默认为false;
a.adjustOrder = true;
//设置为true时,用户可以拖动列表,重新排列位置
a.deleteAllShow = true
//设置是否显示,全部清除按钮
a.countData = true;
//是否向服务器端提交组件文件列表统计信息,POST方式提交数据
//access2008_box_info_max 列表总数量
//access2008_box_info_upload 剩余数量 (包括当前上传条目)
//access2008_box_info_over 已经上传完成数量 (不包括当前上传条目)
a.isShowUploadButton = true;
//是否显示上传按钮,默认为true
a.isRotation = true;
//是否可旋转图片
//此项只有在缩略图模式下才有用
//开启此项会POST一个图片角度到服务器端,由服务器端旋转图片
//access2008_image_rotation 角度 0 到 -360
a.isErrorStop = true;
//遇见错误时,是否停止上传,如果为false时,忽略错误进入下一个上传
return a ;
//返回Object
}
JS函数 challs_flash_style()
function challs_flash_style(){ //组件颜色样式设置函数
var a = {};
/* 整体背景颜色样式 */
a.backgroundColor=['#f6f6f6','#f3f8fd','#dbe5f1']; //颜色设置,3个颜色之间过度
a.backgroundLineColor='#5576b8'; //组件外边框线颜色
a.backgroundFontColor='#066AD1'; //组件最下面的文字颜色
a.backgroundInsideColor='#FFFFFF'; //组件内框背景颜色
a.backgroundInsideLineColor=['#e5edf5','#34629e']; //组件内框线颜色,2个颜色之间过度
/* 头部颜色样式 */
a.Top_backgroundColor=['#e0eaf4','#bcd1ea']; //颜色设置,数组类型,2个颜色之间过度
a.Top_fontColor='#245891'; //头部文字颜色
/* 按钮颜色样式 */
a.button_overColor=['#FBDAB5','#f3840d']; //鼠标移上去时的背景颜色,2个颜色之间过度
a.button_overLineColor='#e77702'; //鼠标移上去时的边框颜色
a.button_overFontColor='#ffffff'; //鼠标移上去时的文字颜色
a.button_outColor=['#ffffff','#dde8fe']; //鼠标离开时的背景颜色,2个颜色之间过度
a.button_outLineColor='#91bdef'; //鼠标离开时的边框颜色
a.button_outFontColor='#245891'; //鼠标离开时的文字颜色
/* 滚动条样式 */
a.List_scrollBarColor=0x000000; //滚动条颜色
a.List_scrollBarGlowColor=0x34629e; //滚动条阴影颜色
/* 文件列表样式 */
a.List_backgroundColor='#EAF0F8'; //列表背景色
a.List_fontColor='#333333'; //列表文字颜色
a.List_errFontColor='#ff0000'; //列表错误信息文字颜色
a.List_LineColor='#B3CDF1'; //列表分割线颜色
a.List_cancelOverFontColor='#ff0000'; //列表取消文字移上去时颜色
a.List_cancelOutFontColor='#D76500'; //列表取消文字离开时颜色
a.List_progressBarLineColor='#B3CDF1'; //进度条边框线颜色
a.List_progressBarBackgroundColor='#D8E6F7'; //进度条背景颜色
a.List_progressBarColor=['#FFCC00','#FFFF00']; //进度条进度颜色,2个颜色之间过度
/* 错误提示框样式 */
a.Err_backgroundColor='#C0D3EB'; //提示框背景色
a.Err_fontColor='#245891'; //提示框文字颜色
a.Err_shadowColor='#000000'; //提示框阴影颜色
/* 手机模式专用样式 (ListShowType = 6)*/
a.phone_backgroundColor = "#232323"; //手机模式背景色
a.phone_backgroundFontColor = "#f6f6f6"; //手机模式字体颜色
a.phone_top_font = 20; //手机模式头部文字大小
a.phone_button_font = 18; //手机模式按钮文字大小
a.phone_button_lineColor = "#2e2e2e"; //手机模式按钮边线色1
a.phone_button_default_color = "#232323"; //手机模式按钮默认背景色
a.phone_button_default_fontColor = "#f6f6f6"; //手机模式按钮默认字色
a.phone_button_click_color = "#265259"; //手机模式按钮点击时背景色
a.phone_button_click_fontColor = "#f6f6f6"; //手机模式按钮点击时字色
a.phone_backgroundInsideColor = "#2e2e2e"; //手机模式内框背景颜色
a.phone_List_backgroundColor = "#232323"; //手机模式列表背景色
a.phone_List_progressBarBackgroundColor = "#166549"; //手机模式列表进度条颜色
a.phone_List_name_font = 24; //手机模式列表文件名字体大小
a.phone_List_name_color = "#fff"; //手机模式列表文件名字体颜色
a.phone_List_type_font = 18; //手机模式列表状态字体大小
a.phone_List_type_color = "#eee"; //手机模式列表状态字体颜色
a.phone_List_Button_del_backgroundColor = "#e76e66"; //手机模式列表删除按钮背景色
a.phone_List_Button_del_off_backgroundColor = "#666"; //手机模式列表删除按钮禁用下的背景色
a.phone_List_Button_del_font = 20; //手机模式列表删除按钮文本大小
a.phone_List_Button_del_color = "#fff"; //手机模式列表删除按钮文本颜色
return a;
}
JS函数 challs_flash_language()
function challs_flash_language(){ //组件文字设置函数
var a = {
// $[1]$ $[2]$ $[3]$是替换符号
// \n 是换行符号
//按钮文字
ButtonTxt_1:'停 止',
ButtonTxt_2:'选择文件',
ButtonTxt_3:'上 传',
ButtonTxt_4:'清空',
ButtonTxt_5:'删 除', //手机模式条目专用
//全局文字设置
Font:'宋体',
FontSize:12,
//提示文字
Alert_1:'初始化错误:\n\n没有找到 JAVASCRITP 函数 \n函数名为 challs_flash_update()',
Alert_2:'初始化错误:\n\n函数 challs_flash_update() 返回类型必须是 "Object" 类型',
Alert_3:'初始化错误:\n\n没有设置上传路径地址',
Alert_4:'添加上传文件失败,\n\n不可以在添加更多的上传文件!',
Alert_5:'添加上传文件失败,\n\n等待上传文件列表只能有$[1]$个,\n请先上传部分文件!',
Alert_6:'提示信息:\n\n请再选择$[1]$个上传文件!',
Alert_7:'提示信息:\n\n请至少再选择$[1]$个上传文件!',
Alert_8:'请选择上传文件!',
Alert_9:'上传错误:\n\n$[1]$',
//界面文字
Txt_5:'等待上传',
Txt_6:'等待上传:$[1]$个 已上传:$[2]$个',
Txt_7:'字节',
Txt_8:'总量限制($[1]$MB),上传失败',
Txt_9:'文件超过$[1]$MB,上传失败',
Txt_10:'秒',
Txt_11:'保存数据中...',
Txt_12:'上传完毕',
Txt_13:'文件加载错误',
Txt_14:'扫描文件...',
Txt_15:'验证文件...',
Txt_16:'取消',
Txt_17:'无图',
Txt_18:'加载中',
Txt_20:'关闭',
Txt_21:'确定',
Txt_22:'上传文件',
//错误提示
Err_1:'上传地址URL无效',
Err_2:'服务器报错:$[1]$',
Err_3:'上传失败,$[1]$',
Err_4:'服务器提交效验错误',
Err_5:'效验数据无效错误'
};
//英文
// var a = {
// ButtonTxt_1:'Stop',
// ButtonTxt_2:'Add file',
// ButtonTxt_3:'Upload',
// ButtonTxt_4:'Empty',
// ButtonTxt_5:'DEL',
// Font:'Arial',
// FontSize:12,
// Alert_1:'Initialization error:\n\nJAVASCRITP function not found \nthe name of the function is challs_flash_update()',
// Alert_2:'Initialization error:\n\nfunction challs_flash_update() return type must be "Object"',
// Alert_3:'Initialization error:\n\nUpload path address does not set',
// Alert_4:'Add files failed,\n\nno more files to add!',
// Alert_5:'Add files failed,\n\nthe number of files in list is no more than $[1]$,\nplease upload a part of files firstly!',
// Alert_6:'Message:\n\nplease select $[1]$ file(s) again!',
// Alert_7:'Message:\n\nplease select $[1]$ file(s) at least again!',
// Alert_8:'Please select file(s)!',
// Alert_9:'Error:\n\n$[1]$',
// Txt_5:'Waiting for upload',
// Txt_6:'Wait :$[1]$ upload:$[2]$ ',
// Txt_7:'Bite',
// Txt_8:'Total limit($[1]$MB),upload failed',
// Txt_9:'The filem is over($[1]$MB),upload failed',
// Txt_10:'S',
// Txt_11:'Saving data...',
// Txt_12:'Upload complished',
// Txt_13:'File load error',
// Txt_14:'Sacnning...',
// Txt_15:'Verifying...',
// Txt_16:'Cancel',
// Txt_17:'No Image',
// Txt_18:'Loading',
// Txt_20:'Close',
// Txt_21:'OK',
// Txt_22:'Upload Files',
// Err_1:'Address URL invalid',
// Err_2:'Server error:$[1]$',
// Err_3:'Upload error,$[1]$',
// Err_4:'Efficacy server submited error',
// Err_5:'Efficacy data invalid'
// }
return a;
}
JS 事件函数示例
//每次上传前,是否有前置请求
//file 包括大小,名称,类型
function challs_update_front_url(file){
var a = {};
a.url = "http://localhost:50718/getkey.ashx"; //请求地址
a.methods = "get"; //提交模式
a.text = "请求签名中"; //提示文字
a.data = { //参数,无参数可以不设置
dir:"up_files"//上传目录
}
frontPostData = {};
return a;
}
var frontPostData = {};
//前置请求回调
//file 包括大小,名称,类型
//a 服务器返回字符串
function challs_update_front_data(file,a,xhr){
document.getElementById('show').innerHTML+=a;
return true;//返回 false 时,组件将会停止上传
}
//每次上传时,获取需要同步上传的POST数据
function challs_post_obj(){
var a = {};
a.temp = "temp"
return a;
}
//每次提交时,自定义的HTTP头
//跨域提交时,需要修改的header头key 需要服务器端设置header, Access-Control-Allow-Headers 头,允许客户端设置头信息,否则提交会报错
function challs_update_header(){
var a = {};
a.access2008 = "true"
return a;
}
function challs_flash_onComplete(a){ //每次上传完成调用的函数,并传入一个Object类型变量,包括刚上传文件的大小,名称,上传所用时间,文件类型
var name=a.fileName; //获取上传文件名
var size=a.fileSize; //获取上传文件大小,单位字节
var time=a.updateTime; //获取上传所用时间 单位毫秒
var type=a.fileType; //获取文件类型,在 Windows 上,此属性是文件扩展名。 在 Macintosh 上,此属性是由四个字符组成的文件类型
var creationDate = a.fileCreationDate //获取文件创建时间
var modificationDate = a.fileModificationDate //获取文件最后修改时间
document.getElementById('show').innerHTML+=name+' --- '+size+'字节 ----文件类型:'+type+'--- 用时 '+(time/1000)+'秒
'
}
function challs_flash_onCompleteData(a){ //获取服务器反馈信息事件
document.getElementById('show').innerHTML+='服务器端反馈信息:
'+a+'
';
}
function challs_flash_onStart(a){ //开始一个新的文件上传时事件,并传入一个Object类型变量,包括刚上传文件的大小,名称,类型
var name=a.fileName; //获取上传文件名
var size=a.fileSize; //获取上传文件大小,单位字节
var type=a.fileType; //获取文件类型,在 Windows 上,此属性是文件扩展名。 在 Macintosh 上,此属性是由四个字符组成的文件类型
var creationDate = a.fileCreationDate //获取文件创建时间
var modificationDate = a.fileModificationDate //获取文件最后修改时间
document.getElementById('show').innerHTML+=name+'开始上传!
';
return true; //返回 false 时,组件将会停止上传
}
function challs_flash_onStatistics(a){ //当组件文件数量或状态改变时得到数量统计,参数 a 对象类型
var uploadFile = a.uploadFile; //等待上传数量
var overFile = a.overFile; //已经上传数量
var errFile = a.errFile; //上传错误数量
}
function challs_flash_alert(a){ //当提示时,会将提示信息传入函数,参数 a 字符串类型
document.getElementById('show').innerHTML+='组件提示:'+a+'
';
}
function challs_flash_onCompleteAll(a){ //上传文件列表全部上传完毕事件,参数 a 数值类型,返回上传失败的数量
document.getElementById('show').innerHTML+='所有文件上传完毕,上传失败'+a+'个!
';
//window.location.href='http://www.access2008.cn/update'; //传输完成后,跳转页面
}
function challs_flash_onSelectFile(a){ //用户选择文件完毕触发事件,参数 a 数值类型,返回等待上传文件数量
document.getElementById('show').innerHTML+='文件选择完成:等待上传文件'+a+'个!
';
}
function challs_flash_deleteAllFiles(){ //清空按钮点击时,出发事件
//返回 true 清空,false 不清空
return confirm("你确定要清空列表吗?");
}
function challs_flash_onError(a){ //上传文件发生错误事件,并传入一个Object类型变量,包括错误文件的大小,名称,类型
var err=a.textErr; //错误信息
var name=a.fileName; //获取上传文件名
var size=a.fileSize; //获取上传文件大小,单位字节
var type=a.fileType; //获取文件类型,在 Windows 上,此属性是文件扩展名。 在 Macintosh 上,此属性是由四个字符组成的文件类型
var creationDate = a.fileCreationDate //获取文件创建时间
var modificationDate = a.fileModificationDate //获取文件最后修改时间
document.getElementById('show').innerHTML+=''+name+' - '+err+'
';
}
TypeScript声明文件 - CFUpdate.d.ts
/**
* CFUpdate上传组件 TypeScript声明文件
*/
declare namespace access2008 {
export interface CFUpdate {
/**
* 版本号
*/
version: string;
/**
* 设置组件样式对象
* @param obj
*/
style(style: CFUpdateStyle): void;
/**
* 设置组件初始化参数
* @param obj
*/
update(value: CFUpdateUpdate): void;
/**
* 设置组件文本参数
* @param obj
*/
language(lang: CFUpdateLanguage): void;
/**
* 设置每次上传完成调用的函数(函数,函数里面this对象)
* @param fun 函数
* @param funThis 函数里面this对象
*/
setEventComplete(fun: (val: CFUpdateFileData) => void, funThis?: any): void;
/**
* 设置获取服务器反馈信息事件(函数,函数里面this对象)
* @param fun 函数
* @param funThis 函数里面this对象
*/
setEventCompleteData(fun: (txt: string, xhr: XMLHttpRequest) => void, funThis?: any): void;
/**
* 设置上传文件发生错误事件函数(函数,函数里面this对象)
* @param fun 函数
* @param funThis 函数里面this对象
*/
setEventError(fun: (file: CFUpdateFileData & CFUpdateError) => void, funThis?: any): void;
/**
* 设置当提示时,会将提示信息传入函数(函数,函数里面this对象)
* @param fun 函数
* @param funThis 函数里面this对象
*/
setAlert(fun: (txt: string) => void, funThis?: any): void;
/**
* 设置当组件文件数量或状态改变时得到数量统计函数(函数,函数里面this对象)
* @param fun 函数
* @param funThis 函数里面this对象
*/
setEventStatistics(fun: (val: CFUpdateStatisticsData) => void, funThis?: any): void;
/**
* 设置用户选择文件完毕触发事件函数(函数,函数里面this对象)
* @param fun 函数 参数 num 数值类型,返回等待上传文件数量
* @param funThis 函数里面this对象
*/
setEventSelectFile(fun: (num: number) => void, funThis?: any): void;
/**
* 设置清空按钮点击时,出发事件函数(函数,函数里面this对象)
* @param fun 函数 返回 true 清空,false 不清空
* @param funThis 函数里面this对象
*/
setDeleteAllFiles(fun: () => boolean, funThis?: any): void;
/**
* 设置开始一个新的文件上传时事件函数(函数,函数里面this对象)
* @param fun 函数
* @param funThis 函数里面this对象
*/
setEventStart(fun: (file: CFUpdateFileData) => boolean, funThis?: any): void;
/**
* 设置上传文件列表全部上传完毕事件(函数,函数里面this对象)
* @param fun 函数 参数 num 数值类型,返回上传失败的数量
* @param funThis 函数里面this对象
*/
setEventCompleteAll(fun: (num: number) => void, funThis?: any): void;
/**
* 设置同步上传的Post数据
* @param fun 函数 返回 {} 对象
* @param funThis 函数里面this对象
*/
setPostObj(fun: () => { [key: string]: string } | undefined, funThis?: any): any;
/**
* 设置提交时自定义的HTTP头
* @param fun 函数 返回 {} 对象
* @param funThis 函数里面this对象
*/
setUpdateHeader(fun: () => { [key: string]: string } | undefined, funThis?: any): any;
/**
* 组件开始运行(DIV对象,宽,高)
* 可以直接设置ID名称就可以 c.start("cfupdate",580,508);
* 高和宽可以设置百分比c.start("cfupdate","50%","50%");
* @param div DIV对象或id名称
* @param width
* @param height
*/
start(div: HTMLElement | string, width?: number | string, height?: number | string): void;
/**
* 设置组件宽高
* @param width
* @param height
*/
setSize(width?: number | string, height?: number | string): void;
/**
* 是否支持组件所需的JS类和CSS3
*/
isSupport(): boolean;
}
/**
* 文件统计信息
*/
export interface CFUpdateStatisticsData {
/**
* 等待上传数量
*/
uploadFile: number;
/**
* 已经上传数量
*/
overFile: number;
/**
* 上传错误数量
*/
errFile: number;
}
export interface CFUpdateError {
/**
* 错误信息
*/
textErr: string;
}
/**
* 上传文件基本信息
*/
export interface CFUpdateFileData {
/**
* 上传文件名
*/
fileName: string;
/**
* 上传文件大小,单位字节
*/
fileSize: number;
/**
* 获取上传所用时间 单位毫秒
*/
updateTime: number;
/**
* 获取文件类型,在 Windows 上,此属性是文件扩展名。 在 Macintosh 上,此属性是由四个字符组成的文件类型
*/
fileType: string;
/**
* 获取文件创建时间
*/
fileCreationDate: string;
/**
* 获取文件最后修改时间
*/
fileModificationDate: string;
}
/**
* 初始化数据对象
*/
export interface CFUpdateUpdate {
/**
* 设置组件头部名称
*/
title: string;
/**
* 设置Form表单的文本域的Name属性
*/
FormName: string;
/**
* 设置服务器接收代码文件
* http://www.access2008.cn/.../update.php
*/
url: string;
/**
* 设置提交参数,以GET形式提交,例:"key=value&key=value&..."
*/
parameter: string;
/**
* 设置可以上传文件 数组类型
* "*.gif;*.png;*.jpg"为文件扩展名列表,其中列出用户选择要上载的文件时过滤的 Windows 文件格式,以分号相隔
*/
typefile: string;
/**
* 设置打开文件选择框过滤文件,注意:这个属性只是过滤显示,判断文件是否合法已a.typefile参数为准
* 如果不限制设置为a.fileAccept = "";
* 比如:"audio/*,video/*,image/*,application/zip",每个类型用逗号隔开
* [audio/*] => 显示所有的声音文件。
* [video/*] => 显示所有的视频文件。
* [image/*] => 显示所有的图像文件。
* [MIME_type] => 一个有效的 MIME 类型,不带参数。http://www.iana.org/assignments/media-types/ 获得标准 MIME 类型的完整列表
*/
fileAccept: string;
/**
* 可限制传输文件总容量,0或负数为不限制,单位MB
*/
UpSize: number;
/**
* 可限制待传文件的数量,0或负数为不限制
*/
fileNum: number;
/**
* 上传单个文件限制大小,单位MB,可以填写小数类型
*/
size: number;
/**
* 设置每次上传时将注册了ID的表单数据以POST形式发送到服务器
* 需要设置的FORM表单中checkbox,text,textarea,radio,select项目的ID值,radio组只需要一个设置ID即可
* 参数为数组类型,注意使用此参数必须有 challs_flash_FormData() 函数支持
*/
FormID: string[];
/**
* 上传完成条目,将自动删除已完成的条目,值为延迟时间,以秒为单位,当值为 -1 时不会自动关闭,注意:当参数CompleteClose为false时无效
*/
autoClose: number;
/**
* 设置为true时,上传完成的条目,将也可以取消删除条目,这样参数 UpSize 将失效, 默认为false
*/
CompleteClose: boolean;
/**
* 设置为true时,可以过滤用户已经选择的重复文件,否则可以让用户多次选择上传同一个文件,默认为false
*/
repeatFile: boolean;
/**
* 设置MD5文件签名模式,参数如下 ,注意:对大文件计算时会很慢,在无特殊需要时,请设置为0
* 0为关闭MD5计算签名
* 1为直接计算MD5签名后上传
* 2为计算签名,将签名提交服务器验证,在根据服务器反馈来执行上传或不上传
* 3为先提交文件基本信息,根据服务器反馈,执行MD5签名计算或直接上传,如果是要进行MD5计算,计算后,提交计算结果,在根据服务器反馈,来执行是否上传或不上传
*/
MD5File: 0 | 1 | 2 | 3;
/**
* 选择的文件加载文件列表顺序,TRUE = 正序加载,FALSE = 倒序加载
*/
loadFileOrder: boolean;
/**
* 至少选择的文件数量,设置这个将限制文件列表最少正常数量(包括等待上传和已经上传)为设置的数量,才能点击上传,0为不限制
*/
mixFileNum: number;
/**
* 文件列表显示类型:
* 1 = 传统列表显示,
* 2 = 缩略图列表显示(适用于图片专用上传)
* 5 = 极简模式
* 6 = 手机模式(适用于手机平板)
*
* 3,4(保留暂无效果)
*/
ListShowType: 1 | 2 | 3 | 5 | 6;
/**
* 是否显示组件头部
*/
TitleSwitch: boolean;
/**
* 强制条目数量,已上传和待上传条目相加等于为设置的值(不包括上传失败的条目),否则不让上传, 0为不限制,设置限制后mixFileNum,autoClose和fileNum属性将无效!
*/
ForceFileNum: number;
/**
* 设置为true时,用户选择文件后,直接开始上传,无需点击上传,默认为false;
*/
autoUpload: boolean;
/**
* 设置为true时,用户可以拖动列表,重新排列位置
*/
adjustOrder: boolean;
/**
* 设置是否显示,全部清除按钮
*/
deleteAllShow: boolean;
/**
* 是否向服务器端提交组件文件列表统计信息,POST方式提交数据
* access2008_box_info_max 列表总数量
* access2008_box_info_upload 剩余数量 (包括当前上传条目)
* access2008_box_info_over 已经上传完成数量 (不包括当前上传条目)
*/
countData: boolean;
/**
* 是否显示上传按钮,默认为true
*/
isShowUploadButton: boolean;
/**
* 是否可旋转图片
* 此项只有在缩略图模式下才有用
* 开启此项会POST一个图片角度到服务器端,由服务器端旋转图片
* access2008_image_rotation 角度 0 到 -360
*/
isRotation: boolean;
/**
* 遇见错误时,是否停止上传,如果为false时,忽略错误进入下一个上传
*/
isErrorStop: boolean;
}
/**
* 组件皮肤样式数据对象
*/
export interface CFUpdateStyle {
/* 整体背景颜色样式 */
/**
* 颜色设置,3个颜色之间过度
*/
backgroundColor: string[];
/**
* 组件外边框线颜色
*/
backgroundLineColor: string;
/**
* 组件最下面的文字颜色
*/
backgroundFontColor: string;
/**
* 组件内框背景颜色
*/
backgroundInsideColor: string;
/**
* 组件内框线颜色,2个颜色之间过度
*/
backgroundInsideLineColor: string[];
/* 头部颜色样式 */
/**
* 颜色设置,数组类型,2个颜色之间过度
*/
Top_backgroundColor: string[];
/**
* 头部文字颜色
*/
Top_fontColor: string;
/* 按钮颜色样式 */
/**
* 鼠标移上去时的背景颜色,2个颜色之间过度
*/
button_overColor: string[];
/**
* 鼠标移上去时的边框颜色
*/
button_overLineColor: string;
/**
* 鼠标移上去时的文字颜色
*/
button_overFontColor: string;
/**
* 鼠标离开时的背景颜色,2个颜色之间过度
*/
button_outColor: string[];
/**
* 鼠标离开时的边框颜色
*/
button_outLineColor: string;
/**
* 鼠标离开时的文字颜色
*/
button_outFontColor: string;
/* 滚动条样式 */
/**
* 滚动条颜色
*/
List_scrollBarColor: number;
/**
* 滚动条阴影颜色
*/
List_scrollBarGlowColor: number;
/* 文件列表样式 */
/**
* 列表背景色
*/
List_backgroundColor: string;
/**
* 列表文字颜色
*/
List_fontColor: string;
/**
* 列表错误信息文字颜色
*/
List_errFontColor: string;
/**
* 列表分割线颜色
*/
List_LineColor: string;
/**
* 列表取消文字移上去时颜色
*/
List_cancelOverFontColor: string;
/**
* 列表取消文字离开时颜色
*/
List_cancelOutFontColor: string;
/**
* 进度条边框线颜色
*/
List_progressBarLineColor: string;
/**
* 进度条背景颜色
*/
List_progressBarBackgroundColor: string;
/**
* 进度条进度颜色,2个颜色之间过度
*/
List_progressBarColor: string[];
/* 错误提示框样式 */
/**
* 提示框背景色
*/
Err_backgroundColor: string;
/**
* 提示框文字颜色
*/
Err_fontColor: string;
/**
* 提示框阴影颜色
*/
Err_shadowColor: string;
/* 手机模式专用样式 (ListShowType = 6)*/
/**
* 手机模式背景色
*/
phone_backgroundColor: string;
/**
* 手机模式字体颜色
*/
phone_backgroundFontColor: string;
/**
* 手机模式头部文字大小
*/
phone_top_font: number;
/**
* 手机模式按钮文字大小
*/
phone_button_font: number;
/**
* 手机模式按钮边线色
*/
phone_button_lineColor: string;
/**
* 手机模式按钮默认背景色
*/
phone_button_default_color: string;
/**
* 手机模式按钮默认字色
*/
phone_button_default_fontColor: string;
/**
* 手机模式按钮点击时背景色
*/
phone_button_click_color: string;
/**
* 手机模式按钮点击时字色
*/
phone_button_click_fontColor: string;
/**
* 手机模式内框背景颜色
*/
phone_backgroundInsideColor: string;
/**
* 手机模式列表背景色
*/
phone_List_backgroundColor: string;
/**
* 手机模式列表进度条颜色
*/
phone_List_progressBarBackgroundColor: string;
/**
* 手机模式列表文件名字体大小
*/
phone_List_name_font: number;
/**
* 手机模式列表文件名字体颜色
*/
phone_List_name_color: string;
/**
* 手机模式列表状态字体大小
*/
phone_List_type_font: number;
/**
* 手机模式列表状态字体颜色
*/
phone_List_type_color: string;
/**
* 手机模式列表删除按钮背景色
*/
phone_List_Button_del_backgroundColor: string;
/**
* 手机模式列表删除按钮禁用下的背景色
*/
phone_List_Button_del_off_backgroundColor: string;
/**
* 手机模式列表删除按钮文本大小
*/
phone_List_Button_del_font: number;
/**
* 手机模式列表删除按钮文本颜色
*/
phone_List_Button_del_color: string;
}
/**
* 文本数据对象
*/
export interface CFUpdateLanguage {
// $[1]$ $[2]$ $[3]$是替换符号
// \n 是换行符号
ButtonTxt_1: string; //'停 止'
ButtonTxt_2: string; //'添加'
ButtonTxt_3: string; //'上传'
ButtonTxt_4: string; //'清空'
ButtonTxt_5: string; //'删 除'
//全局文字设置
Font: string; //'宋体'
FontSize: number; //12
//提示文字
Alert_1: string; //'初始化错误:\n\n没有找到 JAVASCRITP 函数 \n函数名为 challs_flash_update()'
Alert_2: string; //'初始化错误:\n\n函数 challs_flash_update() 返回类型必须是 "Object" 类型'
Alert_3: string; //'初始化错误:\n\n没有设置上传路径地址'
Alert_4: string; //'添加上传文件失败,\n\n不可以在添加更多的上传文件!'
Alert_5: string; //'添加上传文件失败,\n\n等待上传文件列表只能有$[1]$个,\n请先上传部分文件!'
Alert_6: string; //'提示信息:\n\n请再选择$[1]$个上传文件!'
Alert_7: string; //'提示信息:\n\n请至少再选择$[1]$个上传文件!'
Alert_8: string; //'请选择上传文件!'
Alert_9: string; //'上传错误:\n\n$[1]$'
//界面文字
Txt_5: string; //''
Txt_6: string; //'等待上传:$[1]$个 已上传:$[2]$个'
Txt_7: string; //'字节'
Txt_8: string; //'总量限制($[1]$MB),上传失败'
Txt_9: string; //'文件超过$[1]$MB,上传失败'
Txt_10: string; //'秒'
Txt_11: string; //'保存数据中...'
Txt_12: string; //'上传完毕'
Txt_13: string; //'文件加载错误'
Txt_14: string; //'扫描文件...'
Txt_15: string; //'验证文件...'
Txt_16: string; //'取消'
Txt_17: string; //'无图'
Txt_18: string; //'加载中'
Txt_20: string; //'关闭'
Txt_21: string; //'确定'
Txt_22: string; //'上传文件'
//错误提示
Err_1: string; //'上传地址URL无效'
Err_2: string; //'服务器报错:$[1]$'
Err_3: string; //'上传失败,$[1]$'
Err_4: string; //'服务器提交效验错误'
Err_5: string; //'效验数据无效错误'
}
}
//http://www.access2008.cn/html5update/
declare var CFUpdate: { new(): access2008.CFUpdate; };
版权声明
简体中文版CFUpload组件免费版,我们不向用户对于该组件做任何承诺,用户使用本组件产生的一切后果,我们也不承担任何责任
简体中文版CFUpload组件免费版可以使用在任何系统中,包括商业系统,用户不用支付任何费用,但是必须保证组件的完整性,不允许在我们没有同意的情况下对组件进行任何修改
我们保留对该组件的所有权利!