SWFUpload异步上传图像

SWFUpload 有很多种出现也比较早 这里主要讲ASP.NET环境

首先 你需要准备SWFUpLoad 开发包

下载SWF的基础包SWFUpload_v250_beta_3_samples  这个是官方实例

下载整理好的swfuploadv250.Net开发包

将整理好的开发包直接导入项目

下面就开始将今天的主角了 SWFUpload 在 ASP.NET 的用法

==============================

导入SWFUpload 所需要的 Script

1 <script src="JS/jquery.js"></script>
2 <script src="SWFUpLoad/handlers.js"></script>
3 <script src="SWFUpLoad/swfupload.js"></script>

SWFUpload 所需要的 Html

 1 <body>
 2     <div id="content">
 3         <div id="swfu_container" style="margin: 0px 10px;">
 4             <div>
 5                 <span id="spanButtonPlaceholder"></span>
 6             </div>
 7             <div id="divFileProgressContainer" style="height: 75px;"></div>
 8             <img id="imgSrc" />
 9         </div>
10     </div>
11 </body>

Script生成SWFUpload对象

 1 <script type="text/javascript">
 2         var swfu;
 3         window.onload = function () {
 4             swfu = new SWFUpload({
 5                 // Backend Settings
 6                 upload_url: "Ashx/UpLoad.Ashx",
 7                 post_params: {
 8                     "ASPSESSID": "<%=Session.SessionID %>"
 9                 },
10 
11                 // File Upload Settings
12                 file_size_limit: "4 MB",
13                 file_types: "*.jpg;.gif;.png",
14                 file_types_description: "JPG Images",
15                 file_upload_limit: 0,    // Zero means unlimited
16 
17                 // Event Handler Settings - these functions as defined in Handlers.js
18                 //  The handlers are not part of SWFUpload but are part of my website and control how
19                 //  my website reacts to the SWFUpload events.
20                 swfupload_preload_handler: preLoad,
21                 swfupload_load_failed_handler: loadFailed,
22                 file_queue_error_handler: fileQueueError,
23                 file_dialog_complete_handler: fileDialogComplete,
24                 upload_progress_handler: uploadProgress,
25                 upload_error_handler: uploadError,
26                 //uploadSuccess
27                 upload_success_handler: ShowData,
28                 upload_complete_handler: uploadComplete,
29 
30                 // Button settings
31                 button_image_url: "SWFUpLoad/images/XPButtonNoText_160x22.png",
32                 button_placeholder_id: "spanButtonPlaceholder",
33                 button_width: 160,
34                 button_height: 22,
35                 button_text: '<span class="button">Select Images <span class="buttonSmall">(4 MB Max)</span></span>',
36                 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
37                 button_text_top_padding: 1,
38                 button_text_left_padding: 5,
39 
40                 // Flash Settings
41                 flash_url: "SWFUpLoad/swfupload.swf",    // Relative to this file
42                 flash9_url: "SWFUpLoad/swfupload_FP9.swf",    // Relative to this file
43 
44                 custom_settings: {
45                     upload_target: "divFileProgressContainer"
46                 },
47 
48                 // Debug Settings
49                 debug: false
50             });
51         }
52     </script>

 注意1：upload_url: "Ashx/UpLoad.Ashx" 定义异步的地址

 注意2：flash_url 和 flash9_url 是否和自己项目路径匹配

 注意3：upload_success_handler 参数为上传完成函数 这里我已经改为自定义的函数 ShowData()

 声明ShowData函数用于后面上传完成后显示

1 //上传成功
2  function ShowData(file, serverData) {
3        var d = serverData.split(":");
4        if (d[0] == "ok") {
5            $("#imgSrc").attr("src", d[1]);
6        }
7   }

 写一般处理程序处理接受到的文件

 1 using System;
 2 using System.Collections.Generic;
 3 using System.IO;
 4 using System.Linq;
 5 using System.Web;
 6 
 7 namespace SWFUpLoad.Ashx
 8 {
 9     /// <summary>
10     /// Upload 的摘要说明
11     /// </summary>
12     public class Upload : IHttpHandler
13     {
14 
15         public void ProcessRequest(HttpContext context)
16         {
17             context.Response.ContentType = "text/plain";
18             HttpPostedFile file = context.Request.Files["Filedata"];//接收文件
19             string fileName = Path.GetFileName(file.FileName);//获取文件名
20             string FileExt = Path.GetExtension(fileName);//获取文件类型
21             if (FileExt == ".jpg" || FileExt == ".png" || FileExt == ".JPG")
22             {
23                 //普通上传
24                 //file.SaveAs(context.Server.MapPath("/UploadImage/" + fileName));
25                 //context.Response.Write("ok:/UploadImage/"+fileName);
26                 //根据上传的文件的日期 创建文件夹
27                 string dir = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/";
28                 Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dir)));//创建文件夹
29                 string fullDir = dir + DateTime.Now.ToString("yyyyMMddHHmmss") + FileExt;//构建了一个完整的路径
30 
31                 file.SaveAs(context.Server.MapPath(fullDir));
32                 context.Response.Write("ok:" + fullDir);
33             }
34         }
35 
36         public bool IsReusable
37         {
38             get
39             {
40                 return false;
41             }
42         }
43     }
44 }

 这样就可以实现无刷新上传文件了 建议文件名已文件流的MD5值 这里为了演示简单处理

 感兴趣可以看看另一个文章 SWFUpLoad 高级用法 使用GDI对SWFUpload上传的图像进行截取头像

posted @ 2017-04-19 23:34  Smile丶星光  阅读(176)  评论(0)  编辑  收藏  举报