SWFUpload異步上傳圖像

時間 2019-11-10

標籤 swfupload 異步上傳圖像欄目 Flash 简体版

原文原文鏈接

SWFUpload 有不少種出現也比較早這裏主要講ASP.NET環境javascript

首先你須要準備SWFUpLoad 開發包html

下載SWF的基礎包SWFUpload_v250_beta_3_samples 這個是官方實例java

下載整理好的swfuploadv250.Net開發包react

將整理好的開發包直接導入項目jquery

下面就開始將今天的主角了 SWFUpload 在 ASP.NET 的用法web

==============================異步

導入SWFUpload 所須要的 Script函數

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

SWFUpload 所須要的 Htmlpost

 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對象this

 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 }