C#部分：

因為上傳文件用到了ajax，需要先將圖片上傳到本地，這里也算是一個比較糾結(jié)的事情吧，因為如果想預覽，除非用一些插件，否則使用的方法都得是先上傳，再預覽這樣。這種來者都要不拒的事，看起來比較流氓哈~~

        HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
        string msg = string.Empty;
        string error = string.Empty;
        string imgurl = string.Empty;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (files.Count > 0)
            {
                 if (System.IO.File.Exists(Server.MapPath("/UploadImages/") + files[0].FileName))
                {
                    msg = "圖片已存在";
                    error = "1001";
                    string res1 = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                    Response.Write(res1);
                    Response.End();return;
                }
                if (files[0].ContentLength > 4 * 1024 * 1024)
                {
                    msg = "圖片大小不能超過4M";
                    error = "1002";
                    string res1 = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                    Response.Write(res1);
                    Response.End();return;
                }
                try
                {
                    files[0].SaveAs(Server.MapPath("/UploadImages/") + System.IO.Path.GetFileName(files[0].FileName));
                }
                catch (System.IO.DirectoryNotFoundException)
                {
                }
                msg = " 上傳成功! 圖片大小為:" + files[0].ContentLength + "K";
                imgurl = "/UploadImages/" + files[0].FileName;
                string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                Response.Write(res);
                Response.End();
            }
        }

如何調(diào)用此插件

    
        $(function () {
            $("#btn_portrait").ShowTheFloatDiv($("#img_portrait"));
        })
        
    

注意事項

必須在“上傳頭像”按鈕所在頁面引入以下幾個文件

UploadPortrait.css

ajaxfileupload.js

jquery-2.0.3.min.js（jQuery插件要求在1.4.2版本之上）

UploadPortrait.js

如果大家在使用過程中出現(xiàn)問題，可以先把前面相關(guān)的兩篇文章略讀一下，大概就能找到原因了。

大致這個功能就是如上這樣，感興趣的朋友可以從下面的地址下載Demo運行看看。此外想說的是，因為是頭像嘛，一定要存數(shù)據(jù)庫的，但是在Demo里我并沒有寫，這個東西就是看大家想怎么實現(xiàn)了，要是我的話，因為之前預覽都要將圖片存到本地，所以如果存數(shù)據(jù)庫的話，當然是會存圖片的url了，那這樣就比較好辦了。

總的來說，要比想像中的快些完成了這個插件，功能倒是達到了自己的預期，但是界面來說，還有很長的一段路要走。第一次寫jQuery插件，很多東西都不太專業(yè)，希望大牛們能多多給予指正和幫助。

Demo下載地址：http://down.51cto.com/data/1871944

關(guān)于上傳的Demo補充內(nèi)容：

上傳的demo有兩個問題需要說明一下，希望下載的朋友能夠注意到，并流暢運行。

1、因為demo是ASP.NET項目，所以大家如想正常運行，需要在本地新建一個web項目，把我上傳的uploadportrait.csproj這個文件添加進去。下次我會直接打包一個完整的web項目再上傳，這次沒做好希望大家給予諒解。另，我開發(fā)的時候Visual Studio版本為2010，這個望大家注意一下。

2、在調(diào)用插件的代碼部分，demo里寫的是

    
        $(function () {
            $("#btn_portrait").ShowTheFloatDiv($(img_portrait));
        })
        
    

應(yīng)該把$(img_portrait)改成$("#img_portrait")，這個也是自己的失誤，下回會注意。

補充：

《jQuery 關(guān)于IE9上傳文件無法進入后臺原因及解決辦法（ajaxfileupload.js第四彈）》