当前位置: 首页 > news >正文

使用Flash打造可定义界面风格的文件上传控件

注:这是我学习Flex时的第一个练手,所以各位高手们可飘过鸟:) 。

在Flash中上传文件是件很轻松的工作,直接对FileReference进行封装即可,具体教程可参考网上教程或文章后的源码。

现提供一个已封装好的Flash文件FileUploader,如下:

 

点击“上传本地文件”后将会弹出一个对话窗口让你选择一个文件,并当你选择文件并确定后将会自动上传到服务器(现演示无效)并提供一个进度条显示。

为了进行对上传需求的定制,FileUploader已提供部分接口事件与方法。

* 对象事件方法:

注:为方便进行说明,事件名中的XX表示的是Flash在HTML代码里的Id名,如HTML代码中的Flash代码类似于以下

 

ContractedBlock.gif Code

 

XX_onInit()表示的是FileUploader_onInit(),其它类似。

 

 1)、XX_onInit()

Flash的初始化事件,当Flash在浏览器已完全载入后将自动调用此脚本方法(如果存在的话)。在此事件中可进行相应的初始化工作,比如设置上传文件的地址、允许上传的文件类型等。

范例:

ContractedBlock.gif Code

 

 2)、XX_onUploading(total,size)

当正在上传文件数据时将触发此事件,通过此事件中的两个参数可计算得知当前的上传进度。

total : 返回的是当前正在上传文件的总大小,单位是:字节

size  : 返回的是共已上传到服务器的文件数据大小,单位是:字节

范例:

ContractedBlock.gif Code

 

3)、XX_onSendComplete(file)

当Flash已将所有文件数据上传到服务端时(服务端不一定已接收完数据)将触发此事件。

file : 已上传的文件对象,拥有两个属性

file.name : 文件名(不带任何路径)

file.size   : 文件大小,单位:字节

范例;

 

 

ContractedBlock.gif Code

 

4)、XX_onUploadComplete(data)

当Flash已上传完数据并服务器已接收完数据时将触发此事件。

data : 服务器返回的信息(如果服务器没有任何信息返回,则此事件不会被触发!)

范例:

ContractedBlock.gif Code

 

5)、XX_onError(error)

当Flash出现错误时(如上传文件)将触发此事件。

error  :  错误信息

范例:

ContractedBlock.gif Code

 

* 对象方法:

1)setUploadFileUrl(url)

设置接收上传文件数据的地址。

url : 路径地址。

2) setUploadFileType(exts)

设置允许选择的文件类型。

exts: 文件类型列表,格式为“描述|类型列表(使用“;”号隔开)”,如果需要设置多种类型可连续设置。如:

"文本文件(*.txt)|*.txt|图片文件(*.jpg,*.bmp,*.png)|*.jpg;*.bmp;*.png|所有文件(*.*)|*.*"

3)  setMaxFileSize(size)

设置最大允许上传的文件大小,单位是"字节",如果设置为"-1"则表示不限制大小!如果选择的文件已超出此值,将自动触发onError事件,并返回"文件大小已超出限制范围"错误信息.

4)setBgColor(color)

设置Flash的背景颜色。

color : 可接受已知颜色的名称或以#开头的16进制颜色值

5)setButtonColor(color)

设置上传按钮的背景颜色。

color : 可接受已知颜色的名称或以#开头的16进制颜色值

6)setButtonText(text)

设置上传按钮的文本,上传按钮的文本默认为“上传本地文件”。

text : 字符串

7)setProgressBarColor(color)

设置上传进度条的颜色。

color : 可接受已知颜色的名称或以#开头的16进制颜色值

8)setProgressBarBgColor(color)

设置上传进度条的背景颜色。

color : 可接受已知颜色的名称或以#开头的16进制颜色值

9)selectLocalFile()

弹出选择文件窗口,并确定选择文件后自动将文件上传到服务器!此方法可代替Flash中上传按钮的点击

10)resetUpload()

重设置Flash的上传界面,当Flash上传文件后默认的上传按钮已被隐藏,显示的则是一条上传进度条。

而如果页面已实现onSendCompleteonUploadComplete事件则当文件上传完后进度条不会自动隐藏,这时必须手动隐藏进度条!参考上面onUploadComplete事件的范例代码。

 

根据上面开放的事件方法,可以完全打造独自个性的上传控件!

源码下载:

http://files.cnblogs.com/kingthy/FileUploader_src.rar

文件说明:

test.html : 测试样例文件

FileUploader.swf : flash文件

FileUploader.mxml  : FileUploader.swf的Flex源码

WebApplication1.rar : 服务端的接收程序样例项目.

本文转自Kingthy博客园博客,原文链接:http://www.cnblogs.com/kingthy/archive/2008/10/08/flex_file_uploader.html ,如需转载请自行联系原作者

相关文章:

  • go 入门学习笔记之 select + chan (十一)
  • HTML5 history API实践
  • 项目中使用RDLC报表
  • Workflow笔记2——状态机工作流
  • Octoroit OS VB操作系统简单介绍
  • 【C#】与C及OC的不同点
  • 10个小技巧帮助Devops走向成功
  • [UVA 11825] Hackers' Crackdown
  • Springboot集成Mybatis
  • 11.32 php扩展模块安装
  • vue跨域解决方法
  • 关于android Activity的 theme
  • HTTP 07 追加协议与 Ajax
  • Javascript 面向对象编程—继承和封装
  • 沃土前端社区教程 - es6(7)常用技能点
  • 【css3】浏览器内核及其兼容性
  • 【附node操作实例】redis简明入门系列—字符串类型
  • HTTP中GET与POST的区别 99%的错误认识
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • swift基础之_对象 实例方法 对象方法。
  • 初识 beanstalkd
  • 对超线程几个不同角度的解释
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 工作手记之html2canvas使用概述
  • 基于webpack 的 vue 多页架构
  • 快速体验 Sentinel 集群限流功能,只需简单几步
  • 理清楚Vue的结构
  • 聊聊hikari连接池的leakDetectionThreshold
  • FaaS 的简单实践
  • 数据库巡检项
  • ​LeetCode解法汇总518. 零钱兑换 II
  • # 飞书APP集成平台-数字化落地
  • # 睡眠3秒_床上这样睡觉的人,睡眠质量多半不好
  • #我与Java虚拟机的故事#连载10: 如何在阿里、腾讯、百度、及字节跳动等公司面试中脱颖而出...
  • (Oracle)SQL优化技巧(一):分页查询
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (附源码)springboot美食分享系统 毕业设计 612231
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (附源码)计算机毕业设计ssm高校《大学语文》课程作业在线管理系统
  • (三)centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (三)Hyperledger Fabric 1.1安装部署-chaincode测试
  • (五)网络优化与超参数选择--九五小庞
  • (一)python发送HTTP 请求的两种方式(get和post )
  • (转)ABI是什么
  • .chm格式文件如何阅读
  • .h头文件 .lib动态链接库文件 .dll 动态链接库
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .net 流——流的类型体系简单介绍
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)
  • @AliasFor注解
  • @SentinelResource详解
  • [8481302]博弈论 斯坦福game theory stanford week 1
  • [ACTF2020 新生赛]Include
  • [Angularjs]asp.net mvc+angularjs+web api单页应用