首页  下载  调用事例  事件函数  TypeScript声明  DEMO  版权声明  (Flash版本)Challs 工作室
CFUpdate (0.9.3 Base)
HTML5 批量上传组件
HTML5版本,只要支持HTML5的浏览器都可以正常使用,并对触摸屏(手机,平板)进行了优化
IE9+ Firefox Chrome Opera Safari IPhone4 iPad2 Android 2.1
下载CFUpdate
版本更新

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组件免费版可以使用在任何系统中,包括商业系统,用户不用支付任何费用,但是必须保证组件的完整性,不允许在我们没有同意的情况下对组件进行任何修改

  我们保留对该组件的所有权利!

沪ICP备2021030256号