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

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

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

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

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

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

* 对象事件方法：

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

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="FileUploader" width="100%" height="30"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
            <param name="movie" value="FileUploader.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="allowScriptAccess" value="sameDomain" />
            <embed src="FileUploader.swf" quality="high" bgcolor="#ffffff"
                width="100%" height="100%" name="FileUploader" align="middle"
                play="true"
                loop="false"
                quality="high"
                allowScriptAccess="sameDomain"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>

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

 1）、XX_onInit()

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

范例：

function FileUploader_onInit(){
    var o = $('FileUploader');
    o.setUploadFileType("图片文件(*.jpg,*.bmp,*.png)|*.jpg;*.bmp;*.png");
    o.setUploadFileUrl("http://localhost:7643/UploadFile.aspx");
}

 2)、XX_onUploading(total,size)

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

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

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

范例：

function FileUploader_onUploading(total,size){
    var o = $('per');
    o.style.width = (size / total * 500) + "px";
    o.innerText = Math.round((size / total * 100),2) + "%";
}

3）、XX_onSendComplete(file)

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

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

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

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

范例；

function FileUploader_onSendComplete(file){
    alert("客户端已发送完文件的数据,文件名" + file.name + ",大小:" + file.size);
}

4）、XX_onUploadComplete(data)

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

data : 服务器返回的信息（如果服务器没有任何信息返回，则此事件不会被触发！）

范例：

function FileUploader_onComplete(data){
    alert("上传文件完成,服务器返回数据:" + data);
    $('FileUploader').resetUpload();
}

5）、XX_onError(error)

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

error  :  错误信息

范例：

function FileUploader_onError(error){
    var o = $('FileUploader');
    alert("出现错误,错误信息为:" + error);
    o.resetUpload();
}

* 对象方法：

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上传文件后默认的上传按钮已被隐藏，显示的则是一条上传进度条。

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

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

源码下载:

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

文件说明:

test.html : 测试样例文件

FileUploader.swf : flash文件

FileUploader.mxml  : FileUploader.swf的Flex源码

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