頭像截圖上傳兩種方式（SWFUpload、一個簡單易用的flash插件）

本文轉載自查看原文 2013-04-11 13:01 2358 ASP.NET

關於SWFUpload的介紹，可以查看百度百科，博客園中也有SWFUpload2.5的中文翻譯文檔。

http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html

SWFUpload .Net安裝包和官方Demo：

http://download.csdn.net/detail/qq14039056961/5246596

關於這兩個插件的介紹，都可以通過以上網址了解，下面提供三個Demo介紹插件的使用。

Demo下載http://pan.baidu.com/share/link?shareid=445745&uk=3627406265

一、swfupload實現上傳：

效果圖：

網盤下載文件解壓后，SWFUpload_v250_beta_3_samples\SWFUpload_v250_beta_3_samples\demos\applicationdemo.net路徑中有一個Default.aspx文件。我們可以拷貝里面的代碼，復制到我們新建的UploadImg.aspx文件中。

注意事項：

1、文件引用：

<script src="../JS/handlers.js" type="text/javascript"></script>
<script src="../JS/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../JS/swfupload.js" type="text/javascript"></script>

將解壓后整理好的swfuploadv250.Net開發包文件夾中的兩個JS以及Jquery復制到項目中，注意引用路徑

2、swfu=new SWFUpload{}中，我們需要修改upload_url（執行上傳操作的一般處理程序或aspx）,比如我修改為upload_url: "UploadImg.ashx"

3、修改flash插件的引用路徑：

// Flash Settings
 //在這里修改flash插件的引用路徑
 flash_url: "/Flash/swfupload.swf", // Relative to this file
 flash9_url: "/Flash/swfupload_FP9.swf", // Relative to this file

4、上傳成功后，我們希望通過得到后台返回的路徑，顯示剛上傳的圖片，添加一個ShowData方法,並將這個方法綁定到 upload_success_handler中。修改為upload_success_handler: ShowData,

//上傳成功后執行,將img標簽的src設置為返回的圖片保存好的路徑
        function ShowData(file, serverData) {
            $("#imgSrc").attr("src", serverData);
        };

5、其他的一些關於圖片類型限制大小限制怎么修改，可以查看官方文檔

UploadImg.aspx

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="../JS/handlers.js" type="text/javascript"></script>
 6     <script src="../JS/jquery-1.8.2.js" type="text/javascript"></script>
 7     <script src="../JS/swfupload.js" type="text/javascript"></script>
 8     <script type="text/javascript">
 9         var swfu;
10         window.onload = function () {
11             swfu = new SWFUpload({
12                 // Backend Settings
13                 //修改執行上傳操作的文件(aspx或ashx)
14                 upload_url: "UploadImg.ashx",
15                 post_params: {
16                     "ASPSESSID": "<%=Session.SessionID %>"
17                 },
18 
19                 // File Upload Settings
20                 file_size_limit: "2 MB",
21                 file_types: "*.jpg",
22                 file_types_description: "JPG Images",
23                 file_upload_limit: 0,    // Zero means unlimited
24 
25                 // Event Handler Settings - these functions as defined in Handlers.js
26                 //  The handlers are not part of SWFUpload but are part of my website and control how
27                 //  my website reacts to the SWFUpload events.
28                 swfupload_preload_handler: preLoad,
29                 swfupload_load_failed_handler: loadFailed,
30                 file_queue_error_handler: fileQueueError,
31                 file_dialog_complete_handler: fileDialogComplete,
32                 upload_progress_handler: uploadProgress,
33                 upload_error_handler: uploadError,
34                 //指定圖片上傳成功后執行的方法為我們自己定義的ShowData
35                 upload_success_handler: ShowData,
36                 upload_complete_handler: uploadComplete,
37 
38                 // Button settings
39                 button_image_url: "images/XPButtonNoText_160x22.png",
40                 button_placeholder_id: "spanButtonPlaceholder",
41                 button_width: 160,
42                 button_height: 22,
43                 button_text: '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
44                 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
45                 button_text_top_padding: 1,
46                 button_text_left_padding: 5,
47 
48                 // Flash Settings
49                 //在這里修改flash插件的引用路徑
50                 flash_url: "/Flash/swfupload.swf", // Relative to this file
51                 flash9_url: "/Flash/swfupload_FP9.swf", // Relative to this file
52 
53                 custom_settings: {
54                     upload_target: "divFileProgressContainer"
55                 },
56 
57                 // Debug Settings
58                 debug: false
59             });
60         }
61         //上傳成功后執行,將img標簽的src設置為返回的圖片保存好的路徑
62         function ShowData(file, serverData) {
63             $("#imgSrc").attr("src", serverData);
64         };
65     </script>
66 
67 
68 </head>
69 <body>
70     <form>
71         <div id="content">    
72             <div id="swfu_container" style="margin: 0px 10px;">
73                 <div>
74                     <span id="spanButtonPlaceholder"></span>
75                 </div>
76                 <div id="divFileProgressContainer" style="height: 75px;"></div>
77                 <div id="thumbnails"></div>
78             </div>
79         </div>
80         <img id="imgSrc" />
81 
82     </form>
83 
84 </body>
85 </html>

前台的工作已經完成，然后我們需要寫一個后台，接收上傳的圖片，保存到文件夾中。這里我建的是一個一般處理程序UploadImg.ashx。

UploadImg.ashx

 1 public void ProcessRequest(HttpContext context)
 2         {
 3             context.Response.ContentType = "text/plain";
 4             HttpPostedFile file = context.Request.Files["Filedata"];//接受文件
 5             string fileName = Path.GetFileName(file.FileName);//獲取文件名
 6             string fileExt = Path.GetExtension(fileName);//獲取文件類型
 7             if (fileExt.Equals(".jpg", StringComparison.InvariantCultureIgnoreCase))
 8             {
 9                 //構建一個路徑，網站根目錄/UploadImg/年份/月/
10                 string dircStr = "/UploadImg/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/";
11                 //在服務器的物理路徑創建一個文件夾，不能寫Path.GetDirectoryName（dircStr），這樣獲取到的是虛擬路徑
12                 Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dircStr)));
13                 //為避免圖片重名，使用guid重命名圖片
14                 string fileLoadName = dircStr + Guid.NewGuid().ToString() + fileExt;
15                 //保存圖片到服務器的物理路徑
16                 file.SaveAs(context.Server.MapPath(fileLoadName));
17                 //響應報文返回路徑名，已便於前台顯示
18                 context.Response.Write(fileLoadName);
19                 
20             }
21             
22         }

這樣子我們的前后台都完成了。總結一下實現思路：

前台：根據提供的demo，添加需要用到的JS、Flash，修改執行上傳操作的文件路徑、JS的引用路徑、Flash的引用路徑，添加上傳成功后的方法（上傳成功后執行,將img標簽的src設置為返回的圖片保存好的路徑），

並綁定到upload_success_handler中。

后台：使用context.Request.Files["Filedata"]接收文件，判斷文件類型后，根據服務器物理路徑創建一個文件夾，為避免重名，使用Guid重命名后，保存圖片，並在響應報文中返回路徑名。

二、我們剛才只是實現了簡單的上傳功能，下面我們用GDI+做一下截圖功能。

效果圖：

1、在剛才的基礎上，添加一個DIV divContent，將截圖前圖片設置為該DIV的背景。在該DIV中，添加一個小DIV divCut，

用於選擇截圖范圍。

<div id="divContent" style="width:300px;height:300px">
      <div id="divCut" style="width:100px;height:100px;border:solid 1px red"></div>
</div>

2、divContent的寬高是可以根據上傳圖片的大小動態確定的，而圖片的寬高我們可以通過后台獲取，獲取后，在前台設置即可。

var d;//保存上傳成功圖片的路徑信息
        function ShowData(file, serverData) {
            d = serverData.split(":");
            if (d[0] == "ok") {
                $("#divContent").css("backgroundImage","url("+d[1]+")").css("width",d[2]+"px").css("height",d[3]+"px");
            }
        };

2、我們希望小DIV能夠移動並調整大小，方便我們選擇截圖范圍，這時候我們可以使用JQueryUI來實現。JqueryUI的安裝包請另行下載。

使用JqueryUI前，我們需要引入jquery.ui.all.css和jquery-ui-1.8.2.custom.min.js。

這里我們用到兩個方法draggable移動層，resizable調整層大小。

代碼只有一句：

$("#divCut").draggable({ containment: 'parent' }).resizable({ containment: '#divContent' });

3、這時候我們發現可以移動層和調整層大小了，但這並不是對圖片做截圖操作，我們希望根據divCut和divContent的位置，確定所選截取圖片的位置，將這些信息返回到后台，通過GDI+截圖。

這里我們可以在截圖按鈕事件中添加一個方法，異步將位置信息返回后台：

$("#btnCut").click(function () {
                var y = $("#divCut").offset().top - $("#divContent").offset().top;
                var x = $("#divCut").offset().top - $("#divContent").offset().top;
                var width = $("#divCut").width();
                var height = $("#divCut").height();
                $.post("cutPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), "imgSrc": d[1] }, function (data) {
                    $("#imgSrc").attr("src",data);
                });
            });

4、這樣前台的事情就做好了，下面我們看一下后台該怎么寫：

后台cutPhoto.ashx需要處理兩個工作，利用SWFUpload插件點擊上傳按鈕時，地址欄參數action設為up，執行上傳操作，並返回文件名、寬高，用於設置DivContent的大小和背景。

if (action == "up")//表示上傳
            {
                HttpPostedFile file = context.Request.Files["Filedata"];//接收文件.
                string fileName = Path.GetFileName(file.FileName);//獲取文件名。
                string fileExt = Path.GetExtension(fileName);//獲取文件類型.
                if (fileExt.Equals(".jpg",StringComparison.InvariantCultureIgnoreCase))
                {
                    using (Image img = Image.FromStream(file.InputStream))//根據上傳的文件創建一個Image.
                    {
                        file.SaveAs(context.Server.MapPath("/UploadImg/" + fileName));
                        context.Response.Write("ok:/UploadImg/" + fileName + ":" + img.Width + ":" + img.Height);
                    }
                }
            }

在點擊截圖按鈕時，異步提交的地址參數action設為cut，執行圖片截取操作，並返回圖片路徑

else if (action == "cut")//頭像截取
            {
                int x = Convert.ToInt32(context.Request.Form["x"]);
                int y = Convert.ToInt32(context.Request.Form["y"]);
                int width = Convert.ToInt32(context.Request.Form["width"]);
                int height = Convert.ToInt32(context.Request.Form["height"]);
                string imgSrc = context.Request.Form["imgSrc"];//獲取上傳成功的圖片路徑
                //根據傳遞過來的范圍，將該范圍的圖片畫到畫布上，將畫布保存。
                using (Bitmap map = new Bitmap(width, height))
                {
                    using (Graphics g = Graphics.FromImage(map))//為畫布創建畫筆.
                    {
                        using (Image img = Image.FromFile(context.Server.MapPath(imgSrc)))//創建img
                        {
                            //將圖片畫到畫布上
                            //第一：對哪張圖片進行操作
                            //二：畫多么大
                            //三：畫哪部分
                            g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
                            string newfile = Guid.NewGuid().ToString();
                            map.Save(context.Server.MapPath("/UploadImg/" + newfile + ".jpg"));//將畫布上的圖片按照GUID命名保存
                            context.Response.Write("/UploadImg/" + newfile + ".jpg");

                        }
                    }
                }

            }

到此我們利用SWFUpload做頭像截圖上傳就完成了。

三、SWFUpload自定義性很強，非常適合做上傳操作，但有時候我們只也可以用一些做好的f更簡單的falsh完成這一功能。

下面我們就用一個比較簡單的插件，效果如下

學習一個插件，我們可以先熟悉它提供的Demo。

1、Demo中，avatar.swf是執行上傳的flash文件，default.jpg是默認顯示的圖片，demo.html是demo，可以直接復制里面的代碼，upfile.aspx是執行上傳的后台文件，其實我們可以用一般處理程序代替，沒必要寫aspx，xml的實際作用不了解無需修改。

2、demo.html中，有兩個層，altContent存放flash，里面的東西最好不要修改，我們只需修改里面引用flash的路徑及默認圖片，avatar_priview用於顯示上傳成功后的圖片，可以刪除。JS中uploadevent上傳成功后執行，status表示響應報文值，返回1則表示成功，執行

var time = new Date().getTime();
        document.getElementById('avatar_priview').innerHTML = "頭像1 : <img src='1.png?" + time + "'/> <br/> 頭像2: <img src='2.png?" + time + "'/><br/> 頭像3: <img src='3.png?" + time + "'/>" ;

這段代碼只是用於顯示上傳成功后的圖片，可以刪除。我修改后的demo.html.

demo.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 3  <head>
 4   <title>flash上傳頭像組件演示</title>
 5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6   <meta name="Keywords" content="flash頭像上傳組件，仿新浪微博頭像上傳組件，頭像圖片剪裁" />
 7   <meta name="Description" content="flash 上傳頭像，用戶體驗好，頭像剪裁，預覽組件" />
 8   <style type="text/css" media="screen">
 9   html, body { height:100%; background-color: #ffffff;}
10   #flashContent { width:100%; height:100%; }
11   </style>
12   
13   <script type="text/javascript">
14    function uploadevent(status){
15     //alert(status);
16         status += '';
17      switch(status){
18      case '1':
19          var time = new Date().getTime();
20         //這里用於顯示剛上傳的圖片，但圖片地址是固定的，不是后天接收到的路徑
21         document.getElementById('avatar_priview').innerHTML = "頭像1 : <img src='1.png?" + time + "'/> <br/> 頭像2: <img src='2.png?" + time + "'/><br/> 頭像3: <img src='3.png?" + time + "'/>" ;
22         
23     break;
24      break;
25      case '-1':
26       window.location.reload();
27      break;
28      default:
29      window.location.reload();
30     } 
31    }
32   </script>
33  </head>
34  <body>
35   <div id="altContent">
36 
37 
38 <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
39 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
40 WIDTH="650" HEIGHT="450" id="myMovieName">
41 <!---這里修改flash路徑-->
42 <PARAM NAME=movie VALUE="/Flash/avatar.swf">
43 <PARAM NAME=quality VALUE=high>
44 <PARAM NAME=bgcolor VALUE=#FFFFFF>
45 <!----./default.jpg修改默認圖片路徑，=./upfile.aspx修改后台執行頁面的路徑------------->
46 <param name="flashvars" value="imgUrl=/UploadImg/default.jpg&uploadUrl=upfile.ashx&uploadSrc=false&pSize=162|162|48|48|20|20" />
47 <!----./default.jpg修改默認圖片路徑，=./upfile.aspx修改后台執行頁面的路徑------------->
48 <!---這里修改flash路徑-->
49 <EMBED src="/Flash/avatar.swf" quality=high bgcolor=#FFFFFF WIDTH="650" HEIGHT="450" wmode="transparent" flashVars="imgUrl=/UploadImg/default.jpg&uploadUrl=upfile.ashx&uploadSrc=false&pSize=162|162|48|48|20|20"
50 NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" allowScriptAccess="always"
51 PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
52 </EMBED>
53 </OBJECT>
54  
55 
56   </div>
57   <!--這個div用於演示剛上傳的圖片，可以刪除 --->
58   <div id="avatar_priview"></div>
59 
60 </body>
61 </html>

我們大概了解了前台做了什么操作，下面我們看一下后台。

后台很簡單，獲取原圖和修改大小后的三張圖片：

String pic = Request.Form["pic"];
String pic1 = Request.Form["pic1"];
String pic2 = Request.Form["pic2"];
String pic3 = Request.Form["pic3"];

並通過File保存，當然，我們如果只需要一張圖片，可以刪除多余代碼，也可以修改保存圖片的地址。有了圖片的地址，我們可以直接在這里將圖片地址保存到數據庫中。

這里要注意的是，返回響應報文

Response.Write("{\"status\":1}");是不能修改的，如果改為其他值，比如圖片路徑，那么后台執行上傳是可以成功的，但前台無法響應上傳成功，不能彈出上傳成功的框。

如果我們需要把后台處理后的路徑返回前台，可以用Session或靜態變量在后台保存值。

upfile.ashx

 1 public void ProcessRequest(HttpContext context)
 2         {
 3             String pic = context.Request.Form["pic"];
 4             String pic1 = context.Request.Form["pic1"];
 5             String pic2 = context.Request.Form["pic2"];
 6             String pic3 = context.Request.Form["pic3"];
 7 
 8             //原圖
 9             if (pic.Length == 0)
10             {
11             }
12             else
13             {
14                 byte[] bytes = Convert.FromBase64String(pic);  //將2進制編碼轉換為8位無符號整數數組
15 
16                 string url = "./src.png";
17                 FileStream fs = new FileStream(context.Server.MapPath(url), System.IO.FileMode.Create);
18                 fs.Write(bytes, 0, bytes.Length);
19                 fs.Close();
20             }
21 
22             byte[] bytes1 = Convert.FromBase64String(pic1);  //將2進制編碼轉換為8位無符號整數數組.
23             byte[] bytes2 = Convert.FromBase64String(pic2);  //將2進制編碼轉換為8位無符號整數數組.
24             byte[] bytes3 = Convert.FromBase64String(pic3);  //將2進制編碼轉換為8位無符號整數數組.
25 
26 
27 
28             //圖1，
29             string url1 = "./1.png";//需要修改圖片保存地址，否則每次都是1.png，第二次會覆蓋，為避免重名，可以使用guid：string fileLoadName =Guid.NewGuid().ToString() + ".png";
30             FileStream fs1 = new FileStream(context.Server.MapPath(url1), System.IO.FileMode.Create);
31             fs1.Write(bytes1, 0, bytes1.Length);
32             fs1.Close();
33 
34             //圖2
35             string url2 = "./2.png";
36             FileStream fs2 = new FileStream(context.Server.MapPath(url2), System.IO.FileMode.Create);
37             fs2.Write(bytes2, 0, bytes2.Length);
38             fs2.Close();
39 
40             //圖3
41             string url3 = "./3.png";
42             FileStream fs3 = new FileStream(context.Server.MapPath(url3), System.IO.FileMode.Create);
43             fs3.Write(bytes3, 0, bytes3.Length);
44             fs3.Close();
45             //這里響應的是1，前台接收到json數組{status:1}，如果返回圖片地址，如改為context.Response.Write("{\"status\":"+url1+"}");則前台頁面無法執行uploadevent方法，只能按固定格式{\"status\":1}。
46             //如果想返回圖片路徑，可以用靜態類或session等方式。
47             context.Response.Write("{\"status\":1}");
48         }

至此我們的截圖上傳功能就完成了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端插件——頭像截圖上傳插件的使用（帶后台） Python實現屏幕截圖的兩種方式圖片上傳的兩種實現方式 jQuery開發插件的兩種方式 Flash上傳組件之SWFUpload文件上傳 springMVC兩種方式實現多文件上傳及效率比較網頁文件上傳功能實現的兩種方式 Mybatis-plus的兩種分頁插件的配置方式 maven 編譯插件指定jdk版本的兩種方式 jQuery中開發插件的兩種方式(附Demo)