MVC3 + Ajax 圖片上傳總結

方法一：uploadify外掛程式

1.Ajax 往後台Post 的資料有兩種，一種是文本類型，一種是大資料檔案圖片等。而Ajax不能直接傳大資料檔案，只能藉助外掛程式實現該功能。

@{    ViewBag.Title = "Index";}<h2>Index</h2>   <script src="http://www.cnblogs.com/Scripts/swfobject.js" type="text/javascript"></script>    <script src="http://www.cnblogs.com/Scripts/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>    <link href="http://www.cnblogs.com/Content/uploadify.css" rel="stylesheet" type="text/css" />    <style type="text/css">        .textstyle1        {            color: Red;            font-weight: bold;        }        .textstyle2        {            color: Green;            font-weight: bold;        }    </style>    <script type="text/javascript">        $(function () {            //上傳            $('#fileInput1').uploadify({                'uploader': '/Content/uploadify.swf',                'script': '/Upload/AddPic',                'folder': '/Upload',                'cancelImg': '/Content/cancel.png',                'fileExt': '*.xls',                'fileDesc': '*.xls',                'sizeLimit': 1024 * 1024 * 4, //4M                'multi': false,                'onComplete': fun            });        });        function fun(event, queueID, fileObj, response, data) {            if (response != "") {                showInfo("成功上傳" + response, true); //showInfo方法設定上傳結果                 }            else {                showInfo("檔案上傳出錯！", false);            }        }        //顯示提示資訊，textstyle2為綠色，即正確資訊；textstyl1為紅色，即錯誤資訊        function showInfo(msg, type) {            var msgClass = type == true ? "textstyle2" : "textstyle1";            $("#result").removeClass();            $("#result").addClass(msgClass);            $("#result").html(msg);        }        //如果點擊‘匯入檔案’時選擇檔案為空白，則提示        function checkImport() {            if ($.trim($('#fileInput1Queue').html()) == "") {                alert('請先選擇要匯入的檔案！');                return false;            }            return true;        }     </script><div>    <input type="text" id="test" />    <p><input id="fileInput1" name="fileInput1" type="file"/></p>    <p style="margin-top:5px;font-size:14px;font-weight:bold;">    <a href="javascript:if(checkImport()){$('#fileInput1').uploadifySettings('scriptData',{'name':$('#test').val()});$('#fileInput1').uploadifyUpload();}">匯入檔案</a></p>    <p style="margin-top:5px;font-size:14px;font-weight:bold;"><span id="result"></span></p></div> 

　　後台代碼：

namespace qdxy.Controllers{    public class UploadController : Controller    {        //        // GET: /Upload/        public ActionResult Index()        {            return View();        }        [HttpPost]        public JsonResult AddPic2(HttpPostedFileBase context)        {            int s = Request.ContentLength;            //string fileName = Path.GetFileName(upImg.FileName);            //string filePhysicalPath = Server.MapPath("~/Upload/"+fileName);            //string name = "", message = "";            //byte[] bytes  = new byte[]{};            //try            //{            //    upImg.SaveAs(filePhysicalPath);            //    name = Path.GetFileName(fileName);            //    bytes = Encoding.Unicode.GetBytes("圖片添加成功");            //    for (int i = 0; i < bytes.Length; i+=2)            //    {            //        message += "\\u" + bytes[i+1].ToString("x").PadLeft(2,'0')+bytes[i].ToString("x").PadRight(2,'0');            //    }            //}            //catch (Exception ex)            //{            //    message = ex.Message;            //}            return Json(new            {                //picpath = "/Upload/" + fileName,                //message = message            });        }        [HttpPost]        public JsonResult AddPic(HttpPostedFileBase FileData, string folder, string name)        {            string title = string.Empty;            string message = string.Empty;            //將傳過來的圖片映射到物理硬碟的路徑上            string storeFilePath = Server.MapPath("~/Upload/"+FileData.FileName);            try            {                //儲存圖片的方法                FileData.SaveAs(storeFilePath);                title = Path.GetFileName(folder);                byte[] bytes = Encoding.Unicode.GetBytes("圖片上傳成功");                //將圖片轉換成Unicode編碼方便傳輸                /*                 * Unicode和漢字編碼小知識 將漢字進行UNICODE編碼，                 * 如：“王”編碼後就成了“\u738b”，UNICODE字元以\u開始，後面有4個數字或者字母                 * ，所有字元都是16進位的數字，每兩位表示的256以內的一個數字。                 * 而一個漢字是由兩個字元組成，於是就很容易理解了，                 * “738b”是兩個字元，分別是“73”“8b”。                 * 但是在將 UNICODE字元編碼的內容轉換為漢字的時候，                 * 字元是從後面向前處理的，所以，需要把字元按照順序“8b”“73”                 * 進行組合得到漢字                 * */                for (int i = 0; i < bytes.Length; i+=2)                {                    message += "\\u" + bytes[i + 1].ToString("x").PadLeft(2, '0') + bytes[i].ToString("x").PadRight(2,'0');                }            }            catch (Exception ex)            {                message = ex.Message;            }            return Json(new {                                    title = title,                message = message            });        }    }}

　　原本是想用Json來返回上傳的結果的，但似乎用戶端的uploadify外掛程式的方法不支援json格式的資料，有待進一步研究。

方法二：利用 JQueryForm外掛程式 詳見：http://www.cnblogs.com/kfx2007/archive/2012/08/27/2658325.html

  這種方法是利用Form提交表單來把大資料傳到背景。