Flash 文件上传组件

朋友有个要求是要在页面上上传文件的时候只能选择指定类型(后缀名)的文件,显然<input type=file/>是无能为力的(至少我没有找到办法,想来javascript/DOM也没有这种能力),所以考虑用Flash做一个小组件。
调用方式如下:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="upload_swf" width="650" height="220"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="images/FileUpload.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#76b900" />
<param name="allowScriptAccess" value="sameDomain" />
//此处向Flash传入自定义变量,注:sessionId是必须的,貌似是Flash的一个Bug
<param name="FlashVars" value='sessionId=<%=session==null?"":session.getId()%>&uploadPath=datarecover.do&fileFilter=[{"name":"Word", "postFix": "*.doc"},{"name":"CSV File", "postFix": "*.csv"}]'/>
<embed src="images/FileUpload.swf" quality="high" bgcolor="#76b900"
width="650" height="220" name="upload_swf" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer"
//此处向Flash传入自定义变量,注:sessionId是必须的,貌似是Flash的一个Bug
FlashVars='sessionId=<%=session==null?"":session.getId()%>&uploadPath=datarecover.do&fileFilter=[{"name":"Excel", "postFix": "*.xls"},{"name":"CSV File", "postFix": "*.csv"}]'>
</embed>
</object>

源代码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();" width="100%" height="100%" >
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.utils.ObjectUtil;
import flash.events.*;
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.net.FileFilter;
import com.adobe.serialization.json.JSON;

private var fileRef:FileReference;
private var sessionId:String;
private var fileFilter:Array;
private var uploadPath:String;


private function initApp():void {
sessionId = Application.application.parameters.sessionId;
var ff:String = String(Application.application.parameters.fileFilter);
fileFilter = JSON.decode(ff) as Array;
uploadPath = Application.application.parameters.uploadPath;
fileRef = new FileReference();
fileRef.addEventListener(Event.CANCEL, traceEvent);
fileRef.addEventListener(Event.COMPLETE, completeEvent);
fileRef.addEventListener(Event.SELECT, selectEvent);
fileRef.addEventListener(IOErrorEvent.IO_ERROR, traceEvent);
fileRef.addEventListener(Event.OPEN, traceEvent);
fileRef.addEventListener(ProgressEvent.PROGRESS, progressEvent);
fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, traceEvent);
}

private function traceEvent(event:Event):void {
//var tmp:String = "";
//ta.text += tmp + event.type + " event:" + mx.utils.ObjectUtil.toString(event) + "\n" ;
//ta.verticalScrollPosition += 20;
}

private function ioErrorEvent(event:IOErrorEvent):void{
Alert.show("IOError:"+event.type+":" + event.text);
traceEvent(event);
}

private function selectEvent(event:Event):void{
btn_upload.enabled = true;
traceEvent(event);
filename.text = fileRef.name;
progressBar.setProgress(0, 100);
progressBar.label = "Loading 0%";
}

private function progressEvent(event:ProgressEvent):void {
progressBar.setProgress(event.bytesLoaded, event.bytesTotal);
traceEvent(event);
}

private function completeEvent(event:Event):void {
progressBar.label = "Complete.";
filename.text += " uploaded";
traceEvent(event);
btn_upload.enabled = false;
btn_cancel.enabled = false;
}

private function uploadFile():void {
var endpoint:String = uploadPath;
endpoint += ";jsessionid="+sessionId;
endpoint +="?fileType="+fileRef.type;
var req:URLRequest = new URLRequest(endpoint);
req.method = URLRequestMethod.POST;
fileRef.upload(req, "filedata", false);
progressBar.label = "Uploading...";
btn_cancel.enabled = true;
}

private function browseFile():void {
var filters:Array = [];
for(var i:int = 0; i < fileFilter.length; i++) {
var filter:Object = fileFilter[i];
filters.push(new FileFilter(filter.name, filter.postFix));
}
fileRef.browse(filters);
}
]]>
</mx:Script>
<mx:Panel title="Upload File" width="600" height="170" layout="vertical" horizontalCenter="0">
<mx:Form height="125" width="572">
<mx:FormItem label="Selected File:" width="520">
<mx:Label id="filename" width="402"/>
</mx:FormItem>

<mx:FormItem direction="horizontal" width="520">
<mx:Button width="80" label="Browse" click="browseFile()" />
<mx:Button width="80" label="Upload" id="btn_upload" enabled="false" click="uploadFile()" />
<mx:Button width="80" label="Cancel" id="btn_cancel" enabled="false" click="fileRef.cancel()" />
</mx:FormItem>

<mx:HRule width="520" tabEnabled="false"/>

<mx:FormItem label="Progress:" width="521">
<mx:ProgressBar id="progressBar" mode="manual" width="427"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>
本实例采用的是Uploadify上传插件,.NET程序,源程序是从网上找的,但是有Bug,已经修改好,并标有部分注释。绝对好用,支持单文件、多文件上传,支持大文件上传,已经过多方面测试,保证好用。 以下附上Uploadify部分常用的参数介绍,要看全部的就去看其API文件了,一般在下载的包里都有。  uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后弹出打开文件对话框,默认值:uploadify.swf。   script : 后台处理程序的相对路径 。默认值:uploadify.php   checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径   fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata   method : 提交方式Post 或Get 默认为Post   scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain   folder : 上传文件存放的目录 。   queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。   queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。   multi : 设置为true时可以上传多个文件。   auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。   fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:   fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。   sizeLimit : 上传文件的大小限制 。   simUploadLimit : 允许同时上传的个数 默认值:1 。   buttonText : 浏览按钮的文本,默认值:BROWSE 。   buttonImg : 浏览按钮的图片的路径 。   hideButton : 设置为true则隐藏浏览按钮的图片 。   rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。   width : 设置浏览按钮的宽度 ,默认值:110。   height : 设置浏览按钮的高度 ,默认值:30。   wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。   cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标 Uploadify还自带了很多参数及有用的方法和回调函数,都在API里,虽然是全英文的,但很容易看懂,这里就不说了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值