swfupload實現用戶文件上傳以及頭像的截取

網站編輯文章的時候須要插入圖片、文件。若是使用FileUpload控件必須提交表單致使頁面刷新，而因爲AJAX不容許上傳文件，因此必須使用其餘解決方案。Flash提供了異步上傳文件的功能，這裏簡介一下別人寫好的flash控件：SWFUpload。

 

本身整理的swfupload開發包http://pan.baidu.com/s/1f3IRE

下面開始咱們的圖片上傳旅程

swfupload上傳圖片文件：

 前臺代碼：

    <%--jquery-ui使用到的樣式--%>
    <link href="/Css/base/jquery-ui.css" rel="stylesheet" />
    <%--項目中使用到了jquery,因此需引入jquery--%>
    <script src="/Scripts/jquery-1.8.2.min.js"></script>
    <%--後面頭像截取使用到了jquery-ui，因此這裏一併引入到項目中--%>
    <script src="/Scripts/jquery-ui-1.8.24.min.js"></script>
    <%--下面是使用swfupload須要的一些文件，須要一併引入到項目中--%>
    <link href="/lib/swfupload/css/default.css" rel="stylesheet" />
    <script src="/lib/swfupload/swfupload.js"></script>
    <script src="/lib/swfupload/handlers.js"></script>
    <script type="text/javascript">
        var filename;
        var swfu;

        window.onload = function () {
            
            swfu = new SWFUpload({
                // Backend Settings 設置處理上傳圖片的url地址。
                upload_url: "fileUpLoadTest.ashx?action=up",
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"
                },

                // File Upload Settings
                file_size_limit: "2 MB",//上傳文件的最大圖片大小
                file_types: "*.jpg",//上傳圖片類型
                file_types_description: "JPG Images",
                file_upload_limit: 0,    // Zero means unlimited

                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                swfupload_preload_handler: preLoad,
                swfupload_load_failed_handler: loadFailed,
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                //用戶上傳圖片成功後的回調函數函數。
                upload_success_handler: function uploadSuccess(file, serverData) {
                   var files= serverData.split(':');
                   alert(files[1]);
                    //document.getElementById("divContainer").style.width = files[2] + "px";//js實現
                    //document.getElementById("divContainer").style.height = files[3] + "px";
                    //document.getElementById("divContainer").style.backgroundImage = "url(" + files[1] + ")";
                    //設置div的寬度和高度和背景圖片的寬度和高度一致。
                   $("#divContainer").css("width", files[2] + "px");
                   $("#divContainer").css("height", files[3] + "px");
                    //設置div的backgroundImage的url。不能直接設置地址，必須加上"url()"
                   $("#divContainer").css("backgroundImage", "url(" + files[1] + ")");
                   //獲取用戶上傳文件的文件名，用於截取頭像時讀取源圖片。
                   filename=files[4];
                },
                upload_complete_handler: uploadComplete,

                // Button settings
                button_image_url: "/lib/swfupload/images/XPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 160,
                button_height: 22,
                button_text: '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                button_text_top_padding: 1,
                button_text_left_padding: 5,

                // Flash Settings
                flash_url: "/lib/swfupload/swfupload.swf",    // Relative to this file這裏須要注意文件路徑。
                flash9_url: "/lib/swfupload/swfupload_FP9.swf",    // Relative to this file

                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },

                // Debug Settings
                debug: false
            });
        }
 //-------------------------------下面是圖片截取的前端代碼------------------------------------------
$(function () {
            
            $(function () {
                //使用jq-ui 實現截取頭像的div的移動和改變大小
                $("#divCut").draggable({ containment: "parent" }).resizable({
                    containment: "#divContainer", aspectRatio: 1 / 1
                });

                $("#btnCut").click(function () {
                    //經過offset()方法返回的相對於瀏覽器的top和left值來獲取截取頭像div相對於圖片的位置。
                    var divtop = $("#divCut").offset().top - $("#divContainer").offset().top;
                    var divleft = $("#divCut").offset().left - $("#divContainer").offset().left;
                    var divwidth = $("#divCut").width();
                    var divHeight = $("#divCut").height();
                  //點擊按鈕發送ajax請求。
                    $.post("fileUpLoadTest.ashx", { "action": "cut", "top": divtop, "left": divleft, "width": divwidth, "height": divHeight, "filename": filename }, function (data) {
                   //返回截取圖片的路徑並設置給img標籤
                        $("#imgcut").attr("src", data);
                    })
                });
            })
        })

</script>

 

頁面控件佈局（這裏只是簡單的實現，具體頁面的設計並未設置）：

<body>
    <form id="form1" runat="server">
                <div>
                <span  id="spanButtonPlaceholder"></span>
            </div>
            <div  id="divFileProgressContainer" style="height: 75px;"></div>
        <div id="divContainer"><div id="divCut" style="border:2px solid red;width:200px;height:200px"></div></div>
        <input type="button" id="btnCut" value="截取" />
    </form>
    <img id="imgcut" alt="Alternate Text" />
</body>

 

後臺代碼：

context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            //獲取客戶端的action，經過判斷action來判斷用戶是上傳圖片仍是頭像截取
             string action = context.Request["action"];
            //圖片上傳--經過action來判斷的 if (context.Request["action"]=="up")
            {
                HttpPostedFile file = context.Request.Files["Filedata"];//經過Filedata來獲取用戶上傳上來的文件 string name=file.FileName;//獲取上傳文件的全文件名
                file.SaveAs(context.Server.MapPath("/img/" + name));//文件保存到項目根目錄下的/img/文件夾下，以用戶上傳的圖片名做文件的文件名。這裏須要注意重複文件名的問題。具體能夠經過把用戶上傳的文件進行md5處理後做爲文件名，這樣重複的文件屢次上傳不會保存多份，相同文件名但文件不一樣的經過md5處理後文件名也就不同了。

               Image img = Image.FromStream(file.InputStream); 
               //像客戶端輸出數據，返回ok表示成功，而後返回上傳文件的路徑在客戶端能夠設置div的背景圖片的url爲文件路徑，並同時返回圖片的大小來設置前端div的大小，最後還返回保存上傳文件的文件名。並在頭像截取的時候傳遞到後臺。
               context.Response.Write("ok:" + "/img/" + name + ":" + (img.Width) + ":" + (img.Height) + ":" + name); }
            //圖片截取 else if (context.Request["action"]=="cut")
            {
                string topstr = context.Request["top"];
                string filename = context.Request["filename"];
                int top = Convert.ToInt32(context.Request["top"]);
                int left = Convert.ToInt32(context.Request["left"]);
                int width = Convert.ToInt32(context.Request["width"]);
                int height = Convert.ToInt32(context.Request["height"]);
                using (Image oldImg = Image.FromFile(context.Server.MapPath("/img/" + filename))) 
                {
                    using (Bitmap bitmap=new Bitmap(width,height))
                    {
                        using (Graphics g=Graphics.FromImage(bitmap))
                        {
                            //g.InterpolationMode = InterpolationMode.High;
                            //g.SmoothingMode = SmoothingMode.AntiAlias;
                            g.DrawImage(oldImg, new Rectangle(0, 0, width, height), new Rectangle(left, top, width, height), GraphicsUnit.Pixel);
                            g.Save();
                        }
                        bitmap.Save(context.Server.MapPath("/img/cut/" + filename));
                        
                    }
                }
                context.Response.Write("/img/cut/" + filename);
            }
            
            

具體實現結果以下：

界面：

上傳圖片:                                                                                                 圖片截取：