ASP.NET MVC3 上傳頭像圖片並截圖

關於上傳頭像並且截圖網上應該有很多資料，大多都是JQuery插件，用起來不是很方便

本文所介紹的方法將快速完成一個“上傳頭像圖片並截圖”，只需要修改少量的代碼

 

我們先來看看完成后的效果：

下面我們在快速搭建一個頭像上傳的MVC3程序：

前台頁面的適當位置加入下面的代碼：

	<input type="button" value="上傳" onclick="clll()" />
        <div id="content" style="width: 630px; height: 360px; padding: 10px; display: block;
            border: 1px solid #ddd;">
        </div>
        <div id="info" style="width: 630px; height: auto; line-height: 20px; border: 1px solid #ddd;
            border-top: 0px; font-size: 12px; padding: 10px;">
            <p style="color: #666">
                圖片說明：<br />
                每次上傳的文件覆蓋前面的文件。上傳后的路徑為: ~/upload/<br />
                以字母b結尾的為大圖（130x130 像素），以字母m結尾的為中圖（55x55像素），以s結尾的為小圖（35x35像素）</p>
        </div>

<div id="content"></div>

Flash的在content顯示，當然，這個也可以配置，我們可以在js代碼中配置

在頁面的適當位置加入下面的代碼：

<script src="@Url.Content("~/Content/themes/avatar/tangram-custom-full-yui.js")" type="text/javascript"></script>
<script type="text/javascript">
    var info = baidu.g("info");
    var options = {
        uploadURL: "@Url.Action("UploadAvatar", "Account")", tipHandle: function (tip) {
            alert(tip);
        }
        , uploadCallBack: function () {
            // 處理完畢后的操作。例如 window.location ='xxxxx/xxxxx';
            alert("頭像更換成功。");
        }
        , createOptions: {
            id: "flashID", url: "@Url.Content("~/Content/themes/avatar/avatarMaker.swf")", width: "630px", height: "360px", container: "content"
        }
    };
    var up = new baidu.flash.avatarMaker(options);
    var t = function () {
        var d = new Date();
        return [d.getHours(), d.getMinutes(), d.getSeconds()].join(":")
    };

    function clll() { up.upload(); }
</script>

 

uploadURL為你的上傳處理函數

createOptions里面可以配置一些flash的信息。

 

在后台響應函數中添加適當的代碼：

public ActionResult UploadAvatar()
        {
            int filecount = Request.Files.Count;//獲得MIME文件流 的文件數量
            Stream[] resStreamArray = new Stream[filecount];//建立文件流數組
            string[] strFilePathArray = new string[filecount];//建立服務器文件地址數組
            long[] iBufferSizeArray = new long[filecount];//建立文件流字節長度
            for (int i = 0; i < filecount; i++)
            {
                resStreamArray[i] = Request.Files.Get(i).InputStream;
                //這里設定保存后的名稱，
                strFilePathArray[i] = Server.MapPath("~/upload/" + DateTime.Now.ToString("yyMMddhhmmss") + Request.Files.Get(i).FileName.Substring(0, 1) + ".png");
                if (System.IO.File.Exists(strFilePathArray[i]))//存在同名文件則刪除
                {
                    System.IO.File.Delete(strFilePathArray[i]);
                }
                iBufferSizeArray[i] = Request.Files.Get(i).InputStream.Length;
                FileStream fileStream = System.IO.File.Create(strFilePathArray[i]);//創建新文件
                byte[] buffer = new byte[iBufferSizeArray[i]];
                int iReadLength = 0;
                //讀取返回流
                iReadLength = resStreamArray[i].Read(buffer, 0, buffer.Length);
                while (iReadLength > 0)
                {
                    //寫入文件流中
                    fileStream.Write(buffer, 0, iReadLength);
                    iReadLength = resStreamArray[i].Read(buffer, 0, buffer.Length);
                }
                fileStream.Flush();
                resStreamArray[i].Close();
                fileStream.Close();
            }
            return View();
        }

 

這樣我們的配置就算完成了，當然，必不可少的2個文件avatarFlash.swf 和 tangram-custom-full-yui.js 我們只需要放在特定的文件夾里面，改下上面的一些參數就好了。

當然，如果你不是用到MVC3，那么將會更簡單哦。

avatarFlash.swf 和 tangram-custom-full-yui.js 在下面給出的連接下載。

 

案例源碼下載地址：ASP.NET MVC3 上傳頭像圖片並截圖

連接不能點擊，請點擊：http://download.csdn.net/detail/risingsun001/5578393

 

希望這篇文章對您有用。