在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
Flash采用Flex开发的,实现了选择文件和统计文件大小的功能,选择了多个文件时会动态的创建Flex组件显示到界面上,并且可以移除所选择的文件。以下是Flex项目结构图:
Flex是完全基于事件驱动的开发模型,通过自定义一个Flex的Application来实现文件的多选和文件数量以及上传文件大小的统计等功能。如上图的FileUpload就是自定义的一个组件,扩展自VBox实现了动态创建组件和处理事件。详细参考下面代码:
}
}
}
在Flex的App程序里就使用上面自定义的Application组件来进行设计,详细如下代码块:
<?xml version="1.0" encoding="utf-8"?>
<custom:CustomApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" xmlns:custom="components.*" layout="horizontal" backgroundAlpha="0" fontSize="12"> <mx:Style> .button {fontWeight:normal;} </mx:Style> <mx:HBox> <mx:VBox width="400" id="fileContainer"> <mx:VBox id="fileUploadBox" maxHeight="250" width="100%" label="Files to Upload" > </mx:VBox> <mx:HBox id="uploadStats" width="100%" visible="false"> <mx:Text text="文件总数:" /><mx:Text id="totalFiles" /> <mx:Text text="文件总大小:" /><mx:Text id="totalSize" /> </mx:HBox> <mx:ProgressBar id="totalProgressBar" width="275" mode="manual" visible="false" /> </mx:VBox> <mx:VBox> <mx:Button id="browseButton" label="添加文件" width="100" styleName="button"/> <mx:Button id="clearButton" label="移除文件" visible="false" width="100" styleName="button"/> <mx:Button id="uploadButton" label="上传文件" visible="false" width="100" styleName="button"/> <mx:Button id="cancelButton" label="取消上传" visible="false" width="100" styleName="button"/> <mx:Text id="mytext" /> </mx:VBox> </mx:HBox> </custom:CustomApplication>
); writer.Write(obj); } } }
控件中定义了多个属性,方便可视化设置控件的属性值,其中最为主要的属性为:UploadPage,该属性的作用就是指定通过那一个处理程序来处理上传文件的请求,实现请求中上传文件的保存功能。在示例程序里,我自定义了一个HttpHandler来处理上传文件的请求,实现IHttpHandler接口。程序代码如下:
namespace FlashUpLoadWeb
{ /// <summary> /// 上传文件处理程序 /// </summary> public class UploadHandler : IHttpHandler, IRequiresSessionState { #region IHttpHandler 成员 public bool IsReusable { get { return true; } } public void ProcessRequest(HttpContext context) { //文件上传存储路径 string uploadPath = context.Server.MapPath(context.Request.ApplicationPath + "/Upload"); for (int i = 0; i < context.Request.Files.Count; i++) { HttpPostedFile uploadFile = context.Request.Files[i]; if (uploadFile.ContentLength > 0) { uploadFile.SaveAs(Path.Combine(uploadPath, uploadFile.FileName)); } } HttpContext.Current.Response.Write(" "); } #endregion } }
定义好了请求处理程序,这时只需要通过配置文件简单的配置就可以设置控件的处理程序页地址了,如下:
<httpHandlers>
<remove verb="POST,GET" path="Upload.axd"/> <add verb="POST,GET" path="Upload.axd" type="FlashUpLoadWeb.UploadHandler"/> </httpHandlers>
另外一个属性就是OnUploadComplete,通过它指定当文件上传完毕后调用客户端的那一个JavaScript提交更新页面状态,详细请查看示例代码。最终效果图下图:
控件还有许多需要完善的地方,比如请求处理程序那一块,上传文件的时候对文件的选择进行判断,不允许重复选择,判断选择队列中的文件在服务器上是否已经存在等等。有兴趣的朋友可以下去改善这些功能!源代码下载
|
请发表评论