首先,大家可以去SWF的官网下载相关Demo或者源码。
官方地址:http://code.google.com/p/swfupload/
官方Demo:http://demo.swfupload.org/v220/
先新建一个项目,并从官网上下载最新的版本解压后添加到项目中。
在相应上传文件的html页,引用下载好的css、js文件,代码如下:
<!DOCTYPE html> <html> <head> <title>SWFUpload Demos - Simple Demo</title> <link href="../css/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../swfupload/swfupload.js"></script> <script type="text/javascript" src="../swfupload/swfupload.queue.js"></script> <script type="text/javascript" src="js/fileprogress.js"></script> <script type="text/javascript" src="js/handlers.js"></script> <script type="text/javascript"> var swfu; window.onload = function() { var settings = { flash_url : "../swfupload/swfupload.swf", flash9_url : "../swfupload/swfupload_fp9.swf", upload_url: "../../UploadHandler.ashx", //上传处理 file_size_limit : "100 MB", file_types : "*.*", file_types_description : "All Files", file_upload_limit : 100, file_queue_limit : 0, custom_settings : { progressTarget : "fsUploadProgress", cancelButtonId : "btnCancel" }, debug: false, // Button settings button_image_url: "images/TestImageNoText_65x29.png", button_width: "65", button_height: "29", button_placeholder_id: "spanButtonPlaceHolder", button_text: '<span class="theFont">Hello</span>', button_text_style: ".theFont { font-size: 16; }", button_text_left_padding: 12, button_text_top_padding: 3, // The event handler functions are defined in handlers.js swfupload_preload_handler : preLoad, swfupload_load_failed_handler : loadFailed, file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, queue_complete_handler : queueComplete // Queue plugin event }; swfu = new SWFUpload(settings); }; </script> </head> <body> <div id="header"> <h1 id="logo"><a href="../">SWFUpload</a></h1> <div id="version">v2.5.0</div> </div> <div id="content"> <h2>Simple Demo</h2> <p>This page demonstrates a simple usage of SWFUpload. It uses the Queue Plugin to simplify uploading or cancelling all queued files.</p> <div class="fieldset flash" id="fsUploadProgress"> <span class="legend">Upload Queue</span> </div> <div id="divStatus">0 Files Uploaded</div> <div> <span id="spanButtonPlaceHolder"></span> <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" /> </div> </div> </body> </html>
在项目中添加UploadHandler.ashx文件用来处理文件的上传,并在项目中添加UploadFile文件夹,用来存放上传的文件。
UploadHandler类的ProcessRequest方法代码如下:
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + file.FileName); //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失 context.Response.Write("1"); } else { context.Response.Write("0"); } }
简单的SWFUpload模型就架构完毕,运行后选择文件上传,就可以在UploadFile中找到了。