swfupload上傳圖片

時間 2019-11-19

原文原文鏈接

項目結構以及插件須要的文件如圖所示javascript

前端代碼:css

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>SWFUpload</title>
 5     <link href="~/Content/Scripts/tools/swfupload/css/default.css" rel="stylesheet" />
 6     <script src="~/Content/Scripts/tools/jquery-1.11.3.min.js"></script>
 7     <script src="~/Content/Scripts/tools/json2.js"></script>
 8     <script src="~/Content/Scripts/tools/swfupload/fileprogress.js"></script>
 9     <script src="~/Content/Scripts/tools/swfupload/handlers.js"></script>
10     <script src="~/Content/Scripts/tools/swfupload/swfupload.js"></script>
11     <script src="~/Content/Scripts/tools/swfupload/swfupload.queue.js"></script>
12     <script type="text/javascript">
13         var swfu;
14         window.onload = function () {
15             var settings = {
16                 upload_url: "/UpLoad/UpLoading",  // 上傳地址
17                 flash_url: "/Content/Scripts/tools/swfupload/swfupload.swf", // 上傳圖片flash
18                 preserve_relative_urls: false,
19                 file_post_name: "fileName", // 上傳文件參數名
20                 file_size_limit: "100 MB",  // 文件大小 
21                 file_types: "*.jpg;*.png;*.gif;*.bmp;*.doc;*.docx", // 文件格式
22                 file_types_description: "All Files",
23                 file_upload_limit: "5",
24                 file_queue_limit: "0",
25                 custom_settings: {
26                     progressTarget: "fsUploadProgress",
27                     cancelButtonId: "btnCancel"
28                 },
29                 debug: true,
30                 // Button settings
31                 button_image_url: "/Content/Scripts/tools/swfupload/images/TestImageNoText_65x29.png",    // Relative to the Flash file
32                 button_width: "65",
33                 button_height: "29",
34                 button_placeholder_id: "spanButtonPlaceHolder",
35                 button_text: '<span class="theFont">瀏覽</span>',
36                 button_text_style: ".theFont { font-size: 16; }",
37                 button_text_left_padding: 12,
38                 button_text_top_padding: 3,
39 
40                 // The event handler functions are defined in handlers.js
41                 file_queued_handler: fileQueued,
42                 file_queue_error_handler: fileQueueError,
43                 file_dialog_complete_handler: fileDialogComplete,
44                 upload_start_handler: uploadStart,
45                 upload_progress_handler: uploadProgress,
46                 upload_error_handler: uploadError,
47                 upload_success_handler: uploadSuccess,
48                 upload_complete_handler: uploadComplete,
49                 queue_complete_handler: queueComplete    // Queue plugin event
50             };
51 
52             swfu = new SWFUpload(settings);
53         };
54     </script>
55 </head>
56 <body>
57 <div id="content">
58         <p>點擊「瀏覽」按鈕，選擇您要上傳的文檔文件後，系統將自動上傳並在完成後提示您。</p>
59         <p>請勿上傳包含中文文件名的文件！</p>
60         <div class="fieldset flash" id="fsUploadProgress">
61             <span class="legend">快速上傳</span>
62         </div>
63         <div id="divStatus">0 個文件已上傳</div>
64         <div>
65             <span id="spanButtonPlaceHolder"></span>
66             <input id="btnCancel" type="button" value="取消全部上傳" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;"/>
67             <input id="btnPase" type="button" value="暫停上傳" onclick="swfu.stopQueue();" style="margin-left: 2px; font-size: 8pt; height: 29px;"/>
68             <input id="btnGoon" type="button" value="繼續上傳" onclick="swfu.startUpload();" style="margin-left: 2px; font-size: 8pt; height: 29px;"/>
69         </div>
70 </div>
71 </body>
72 </html>

後端代碼:html

 1 using System;
 2 using System.Web;
 3 using System.Web.Mvc;
 4 
 5 namespace Notify.Controller.SwfupLoad
 6 {
 7     /// <summary>
 8     /// 上傳圖片控制器
 9     /// </summary>
10     public class UpLoadController : System.Web.Mvc.Controller
11     {
12         /// <summary>
13         /// 上傳圖片首頁
14         /// </summary>
15         /// <returns>視圖</returns>
16         public ActionResult Index()
17         {
18             return View();
19         }
20 
21         /// <summary>
22         /// 上傳圖片處理
23         /// </summary>
24         /// <param name="fileName">圖片流</param>
25         /// <returns>結果</returns>
26         public ActionResult UpLoading(HttpPostedFileBase fileName)
27         {
28             if (fileName != null)
29             {
30                 //建立圖片新的名稱
31                 string nameImg = DateTime.Now.ToString("yyyyMMddHHmmssfff");
32                 //得到上傳圖片的路徑
33                 string strPath = fileName.FileName;
34                 //得到上傳圖片的類型(後綴名)
35                 string type = strPath.Substring(strPath.LastIndexOf(".", StringComparison.Ordinal) + 1).ToLower();
36                 if (ValidateImg(type))
37                 {
38                     //拼寫數據庫保存的相對路徑字符串
39                     //拼寫上傳圖片的路徑
40                     var uppath = Server.MapPath("~/Content/Images/UpImgs/");
41                     uppath += nameImg + "." + type;
42                     //上傳圖片
43                     fileName.SaveAs(uppath);
44                 }
45             }
46             return Content("OK");
47         }
48 
49         /// <summary>
50         /// 驗證上傳圖片類型
51         /// </summary>
52         /// <param name="imgName">圖片</param>
53         /// <returns>結果</returns>
54         public bool ValidateImg(string imgName)
55         {
56             string[] imgType = { "gif", "jpg", "png", "bmp" };
57 
58             int i = 0;
59             bool blean = false;
60 
61             //判斷是否爲Image類型文件
62             while (i < imgType.Length)
63             {
64                 if (imgName.Equals(imgType[i]))
65                 {
66                     blean = true;
67                     break;
68                 }
69                 if (i == (imgType.Length - 1))
70                 {
71                     break;
72                 }
73                 i++;
74             }
75             return blean;
76         }
77     }
78 }

使用svn下載前端

項目地址:http://code.taobao.org/svn/Notify/ java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。