swfupload上传图片

项目结构 以及插件需要的文件如图所示

swfupload上传图片_第1张图片

前端代码:

 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>

后端代码:

 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/     

你可能感兴趣的:(swfupload上传图片)