Flex2.0实现文件上传功能(服务器为ASP.NET)
简介:
新的Flex2.0类库里提供了文件类,方便了上传/下载文件。下面的程序demo演示了Flex2.0生成flash来访问本地文件,在flash里上传用户选择的文件到服务器,flash客户端可以处理文件上传进度等多个事件,服务器端是C#写的文件接收模块,把用户上传的文件保存在服务器上。
Demo演示了ProgressEventType.PROGRESS, EventType.SELECT 2个事件的处理方法。
测试效果:
![]()
测试环境:
操作系统:windows2003 Server
Flex版本:Flex 2.0 Alpha 1
Flash版本: flash Player 8.5
WEB服务器:
IIS 6.0
.net FrameWork 1.1
客户端代码:FileUpload.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml"
    xmlns="*" creationComplete="init();">
    <mx:Script>
        <
            var file:FileReference;

            private function init(){
                Security.allowDomain("*");
                file = new FileReference();
                file.addEventListener(ProgressEventType.PROGRESS, onProgress);
                file.addEventListener(EventType.SELECT, onSelect);
            }

            private function upload(){
                file.browse();
            }
            
            private function onSelect(e:Event){
                Alert.show("上传 " + file.name + " (共 "+Math.round(file.size)+" 字节)?",
                           "确认上传",
                           Alert.YES|Alert.NO,
                           null,
                           proceedWithUpload);
            }
            
            private function onProgress(e:ProgressEvent){
                lbProgress.text = " 已上传 " + e.bytesLoaded 
                    + " 字节,共 " + e.bytesTotal + " 字节";
            }
            
            private function proceedWithUpload(e:AlertClickEvent){
                if (e.detail == Alert.YES){
                    file.upload("http://localhost/JZService/WebForm1.aspx");                    
                }
            }
        ]]>
    </mx:Script>
    
    <mx:Canvas width="100%" height="100%">
        <mx:VBox width="100%" horizontalAlign="center">
            <mx:Label id="lbProgress" text="上传"/>
            <mx:Button label="上传文件" click="upload();"/>            
        </mx:VBox>
    </mx:Canvas>
</mx:Application>
服务端代码:WebForm1.aspx
        private void Page_Load(object sender, EventArgs e) {
            // 在此处放置用户代码以初始化页面
            HttpFileCollection uploadedFiles =  Request.Files;
            string Path = Server.MapPath("data");
            for(int i = 0 ; i < uploadedFiles.Count ; i++) {
                HttpPostedFile F = uploadedFiles[i];
                if(uploadedFiles[i] != null && F.ContentLength > 0) {   
                    string newName = F.FileName.Substring(F.FileName.LastIndexOf("\\") + 1);
                    F.SaveAs(Path + "/" + newName);
                }
            }

        }

新的Flex2.0类库里提供了文件类,方便了上传/下载文件。下面的程序demo演示了Flex2.0生成flash来访问本地文件,在flash里上传用户选择的文件到服务器,flash客户端可以处理文件上传进度等多个事件,服务器端是C#写的文件接收模块,把用户上传的文件保存在服务器上。
Demo演示了ProgressEventType.PROGRESS, EventType.SELECT 2个事件的处理方法。
测试效果:
测试环境:
操作系统:windows2003 Server
Flex版本:Flex 2.0 Alpha 1
Flash版本: flash Player 8.5
WEB服务器:
IIS 6.0
.net FrameWork 1.1
客户端代码:FileUpload.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml"
    xmlns="*" creationComplete="init();">
    <mx:Script>
        <
            var file:FileReference;
            private function init(){
                Security.allowDomain("*");
                file = new FileReference();
                file.addEventListener(ProgressEventType.PROGRESS, onProgress);
                file.addEventListener(EventType.SELECT, onSelect);
            }
            private function upload(){
                file.browse();
            }
            
            private function onSelect(e:Event){
                Alert.show("上传 " + file.name + " (共 "+Math.round(file.size)+" 字节)?",
                           "确认上传",
                           Alert.YES|Alert.NO,
                           null,
                           proceedWithUpload);
            }
            
            private function onProgress(e:ProgressEvent){
                lbProgress.text = " 已上传 " + e.bytesLoaded 
                    + " 字节,共 " + e.bytesTotal + " 字节";
            }
            
            private function proceedWithUpload(e:AlertClickEvent){
                if (e.detail == Alert.YES){
                    file.upload("http://localhost/JZService/WebForm1.aspx");                    
                }
            }
        ]]>
    </mx:Script>
    
    <mx:Canvas width="100%" height="100%">
        <mx:VBox width="100%" horizontalAlign="center">
            <mx:Label id="lbProgress" text="上传"/>
            <mx:Button label="上传文件" click="upload();"/>            
        </mx:VBox>
    </mx:Canvas>
</mx:Application>服务端代码:WebForm1.aspx
        private void Page_Load(object sender, EventArgs e) {
            // 在此处放置用户代码以初始化页面
            HttpFileCollection uploadedFiles =  Request.Files;
            string Path = Server.MapPath("data");
            for(int i = 0 ; i < uploadedFiles.Count ; i++) {
                HttpPostedFile F = uploadedFiles[i];
                if(uploadedFiles[i] != null && F.ContentLength > 0) {   
                    string newName = F.FileName.Substring(F.FileName.LastIndexOf("\\") + 1);
                    F.SaveAs(Path + "/" + newName);
                }
            }
        }
                    
                


            
                
            
        
浙公网安备 33010602011771号