[Flash FileUpload]用flash.net.FileReference实现ASP.NET无刷新文件上传

简介:

********************************************************************
*                                                 版权声明
*
* 本文以Creative Commons的知识共享署名-非商业性使用-相同方式共享发布,请严格遵循该授权协议。
* 本文首发于博客园, 此声明为本文章中不可或缺的一部分。
* 作者网名:    浪子
* 作者EMAILdayichen (at)163.com
* 作者BLOG:  Http://Www.Cnblogs.Com/Walkingboy
*
********************************************************************

[Flash FileUpload]用flash.net.FileReference实现无刷新文件上传

-Written by http://walkingboy.cnblogs.com/ (07-02-07)

摘要:

还在用UpdatePanel嘛?是否还为文件上传苦恼?

还在用Callback嘛?是否对文件上传无计可施?

还在用Ajax上传组件嘛?是否为其不稳定性而头疼不已?

兄弟忘了这些吧,让我们拾起古老的Flash,跟我一道将积蓄已久的无奈、郁闷踩于脚下......

一、楔子

一直都无法忘怀那段痴迷Flash的大学时代,从认识动画,到ActionScript,再到苦练鼠绘,所有付出的时间和睡眠都代表了我对Flash的情有独钟,曾经一直都在幻想毕业后可以从事Flash编程工作。可能自己的先天美感不足或者运气不佳,最终还是远离了自己一直钟爱的Flash。

时隔多年,Flash有了长足的发展,Flex更是呈现一片喜人的景象。

但是个人认为,如果Flash定位为富客户端,而不掺合服务端的推广,我相信现在的很多js类库将失去他们的市场。

喂,谁的臭袜子,稍微理解下我沉浸往事,不能自拔的心情嘛:)

二、上传难题

以前用UpdatePanel的时候,涉及到上传都只能在做一个小页面用Postback来做;

现在用Callback,还是只能使用新页面在Postback;

尝试过好几个Ajax 上传组件,最终败倒在其不稳定下。

昨天偶在codeproject查找资料,看到Flash 上传文件的介绍,才突然想起这个被自己遗忘在角落里的咚咚。

察看了下Flash 的API,发现FileReference和FileReferenceList对文件的上传支持已经相当的好了。 

 
    
事件摘要
事件        说明
onCancel = function(fileRef:FileReference) {}
当用户取消文件浏览对话框时调用。
onComplete = function(fileRef:FileReference) {}
当上载或下载操作成功完成时调用。
onHTTPError = function(fileRef:FileReference, httpError:Number) {}
当上载由于 HTTP 错误而失败时调用。
onIOError = function(fileRef:FileReference) {}
当发生输入/输出错误时调用。
onOpen = function(fileRef:FileReference) {}
当上载或下载操作开始时调用。
onProgress = function(fileRef:FileReference, bytesLoaded:Number, bytesTotal:Number) {}
在文件上载或下载操作期间定期调用。
onSecurityError = function(fileRef:FileReference, errorString:String) {}
当上载或下载由于安全错误而失败时调用。
onSelect = function(fileRef:FileReference) {}
当用户从文件浏览对话框选择要上载或下载的文件时调用。

基本上上传文件所需要的功能都有了。

三、SWF FileUpload

很久没有写ActionStcript,变得好生疏了,熟悉了一个下午才算缓过气来了。定下了这个上传组件的需求:

接受Handler:支持内嵌的HttpHandler处理和自定义的Aspx处理(提供传递参数)

进度条显示:计算总数和已上传数

提供结束JS事件:上传结束触发指定的js方法,并将文件名作为参数

花了一个晚上才写好这个swf,调用相当的简单 

 
    
     内嵌HttpHandler,不做任何处理的调用
         <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
                width="250" height="80" id="SWFFileUpload" align="middle">
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="movie" value="SWFFileUpload.swf" />
                <param name="quality" value="high" />    
                <param name="FlashVars" value="CompletedFunction=OnCompleted">        
                <embed src="SWFFileUpload.swf" name="fileUpload1" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
            </object>

 使用内置的HttpHandler,需要在WebConfig配置HttpHandler信息: 

 
    
<httpHandlers>
    <add verb="*" path="SWFFileUpload.axd" type="SWFFileUpload.SWFFileUpload" validate="false"/>
</httpHandlers>

 

 然后文件会默认被上传到root/UploadFiles/底下,文件名与客户端文件名同,同名则覆盖 

 
   
        指定HttpHandler,指定参数    
        <br />
             <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
                width="250" height="80" id="Object1" align="middle">
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="movie" value="SWFFileUpload.swf" />
                <param name="quality" value="high" />
                <param name="wmode" value="transparent">
                <%--flash组件的参数传递:
                    UploadPage:自定义的ASPX文件接受Handler
                    Args:传递到UploadPage的参数,最终以QueryString的形式传递,以;分割
                    CompletedFunction:上传结束后调用的js方法
                    FileExtension:上传文件类型过滤,以;分割
                    --%>
                <param name="FlashVars" value="UploadPage=CustomerHandler.aspx&Args=name=cdy;blog=walkingboy.cnblogs.com&CompletedFunction=OnCompleted&FileExtension=*.jpg;*.txt">
                <embed src="SWFFileUpload.swf" name="fileUpload2" align="middle"
                    allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
            </object>

         如果文件大的话,需要在webconfig配置(Macromedia官方声称可以支持100M的上传) 

 
    
<httpRuntime maxRequestLength="1550000"/>
 

四、扩展&Demo

目前我只做了单文件的上传,可以利用FileReferenceList将其扩展为多文件上传。

如果你的IE打了最新的补丁,你可能发现出现“单击以激活并使用此控件”的问题,可以考虑封装一个js类,来动态Writer swf object,就可以搞定这个问题。 

 
    
function FileUpload(){
return{
     Show:function(){
    //TODO:
     },
     Hide:function(){
    //TODO:
     }
}
}();

DEMO代码下载:SWFFileUpload.WetTest.rar
有些朋友使用过程中出现问题,没办法得到真正的错误信息,现将flash的源代码fla上传,有问题的朋友自己测试下吧: SwfFileUpload.fla updated by langzi at 07.11.21 
 Update 07.12.19 原来上传的swffileupload.fla丢失了,重新上传。



本文转自浪子博客园博客,原文链接:http://www.cnblogs.com/walkingboy/archive/2007/02/09/Flash_FileUpload_FileReference.html,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
开发框架 前端开发 .NET
ASP.NET WEB——项目创建与文件上传操作
ASP.NET WEB——项目创建与文件上传操作
46 0
|
3月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
26 0
|
6月前
|
存储 开发框架 前端开发
asp.net与asp.net优缺点及示例
asp.net与asp.net优缺点及示例
|
30天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
28 0
|
1月前
|
开发框架 中间件 .NET
C# .NET面试系列七:ASP.NET Core
## 第一部分:ASP.NET Core #### 1. 如何在 controller 中注入 service? 在.NET中,在ASP.NET Core应用程序中的Controller中注入服务通常使用<u>依赖注入(Dependency Injection)</u>来实现。以下是一些步骤,说明如何在Controller中注入服务: 1、创建服务 首先,确保你已经在应用程序中注册了服务。这通常在Startup.cs文件的ConfigureServices方法中完成。例如: ```c# services.AddScoped<IMyService, MyService>(); //
60 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
95 5
|
3月前
|
开发框架 安全 搜索推荐
分享105个NET源码ASP源码,总有一款适合您
分享105个NET源码ASP源码,总有一款适合您
27 4
|
4月前
|
开发框架 .NET
Asp.Net文件上传
Asp.Net文件上传
24 0
|
7月前
|
开发框架 前端开发 .NET
.NET 8 Release Candidate 1 (RC1)现已发布,包括许多针对ASP.NET Core的重要改进!
.NET 8 Release Candidate 1 (RC1)现已发布,包括许多针对ASP.NET Core的重要改进!
174 0
.NET 8 Release Candidate 1 (RC1)现已发布,包括许多针对ASP.NET Core的重要改进!
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
38 0