MVC 中使用uploadify上傳圖片遇到的蛋疼問題
初次使用uploadify上傳圖片，遇到了一些比較糾結的問題，在這裏和大家分享下，有不對的地方還望大神多多指教，希望對剛接觸的朋友有所幫助，文采不好還望見諒。新建項目，引用 uploadify腳本啥的就不說了，直接進入主題：
在Index頁面放了一個上傳圖片的按鍵和腳本代碼如下：
1 @{ 2 ViewBag.Title = "Index"; 3 } 4 <br /><br /><br /> 5 <input id="file_upload" type="file" value="上傳圖片" /> 6 7 <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script> 8 <link href="~/Content/UploadJS/uploadify.css" rel="stylesheet" /> 9 <script src="~/Content/UploadJS/jquery.uploadify.min.js"></script> 10 <script type="text/javascript"> 11 $(function () { 12 $("#file_upload").uploadify({ 13 swf: '@Url.Content("~/Content/UploadJS/uploadify.swf")',// 上傳使用的 Flash 14 uploader: '/Home/Upload', // 服務器端處理地址 15 //顯示參數 16 width: 80, // 按鈕的寬度 17 height: 24, // 按鈕的高度 18 buttonText: "上傳圖片", // 按鈕上的文字 19 buttonCursor: "hand", // 按鈕的鼠標圖標 20 buttonClass: "up_button2", 21 fileObjName: 'Filedata', // 上傳參數名稱 22 //規則參數 23 fileSizeLimit: "5000KB", 24 fileTypeExts: "*.jpg;*.jpeg;*.png;*.gif",//允許上傳的文件擴展名 和下面一起配合使用 25 fileTypeDesc: "請選擇 jpg、jpeg、png、gif 文件",// 文件說明 26 fileSizeLimit: "5MB", //允許上傳的文件大小 27 multi: false, // 是否支持同時上傳多個文件 28 removeTimeout: 1, 29 onUploadSuccess: function (file,data,respose) { 30 var obj = jQuery.parseJSON(data); //把返回的數據序列化爲Obj對象 31 if (obj.ret) { 32 alert(obj.FilePath); 33 } 34 else { 35 alert("2"); 36 } 37 38 } 39 }) 40 }) 41 </script>
下面是控制器代碼：
1 public ActionResult Index() 2 { 3 return View(); 4 } 5 [HttpPost] 6 public ActionResult Upload(HttpPostedFileBase Filedata) { 7 if (Filedata != null && Filedata.ContentLength > 0) 8 { 9 //文件上傳後的保存根路徑 10 string filePath = Server.MapPath("~/UploadImg/"); 11 if (!Directory.Exists(filePath)) 12 { 13 Directory.CreateDirectory(filePath); 14 } 15 string fileName = Path.GetFileName(Filedata.FileName);//獲取文件原名 16 string fileExtension = Path.GetExtension(fileName);//獲取文件擴展名 17 string saveFileName = Guid.NewGuid().ToString() + fileExtension;//要保存的文件名稱 18 int fileSize = Filedata.ContentLength / 1024; 19 if (fileSize > 1024 || fileSize <= 2) 20 { 21 return Json(new { ret = false, message = "文件上傳失敗，請選擇小於1M的圖片" }); 22 } 23 else 24 { 25 Filedata.SaveAs(filePath + saveFileName); 26 return Json(new { ret=true,FilePath="/UploadImg/"+saveFileName}); 27 } 28 } 29 else 30 { 31 return Json(new { ret = false, message = "請選擇要上傳的文件" }); 32 } 33 }
在這裏Upload方法裏要注意一點，就是它所要接收的參數名稱必須是Filedata，不區分大小寫；我們在Index頁面裏可以看到，腳本代碼裏設置了 fileObjName: 'Filedata'這個屬性，所以控制裏接收的名稱必須一樣，之前在Index頁面沒有設置這個屬性，它的默認名稱就是“FileData”，我在控制器是自己隨便起的名稱，這樣控制器接收到的對象一直爲NUll；
接下來我們看看Index頁面Jquery引用的問題，如果引用正確頁面效果應該是這樣的：
從Index頁面可以看到，我引用了下這三個腳本：
一般來說這樣引用 沒有什麼問題啊，但是我的頁面呈現的效果是這樣的：
坑啊，Uploadify引用的樣式啥的都沒有，怎麼回事？用谷歌瀏覽F12跟蹤一下看到引用了兩個Jquery文件，什麼情況？頁面明明就引用了一次啊，怎麼會出來兩次，但事實就是兩個，如下圖：
上圖可以看出不僅有兩個相同的Jquery文件，而且一個還在頁面的最後面才引用，重複引用導致了上傳按鈕樣式啥的加載有誤，糾結好久終於找到原因，原來在我在建項目時，是默認加載模板頁的；也就是Index頁面默認加載了_Layout.cshtml這個模板面，來看看這個頁面的代碼：
從圖上可以看出，其中有@Scripts.Render("~/bundles/jquery")這句代碼，原來它纔是罪魁禍首啊，這句會默認引用Jquery文件，而且會在最後面引用，我們把這一句註釋掉，一切就OK了。
接下來再說一點與上傳無關的題外話，我們可以看到_Layout.cshtml這個模板面還有一句代碼“@RenderSection("scripts", required: false)”，果斷不知道具體是幹什麼用的啊，所以我就把它改爲required: true,接下來調試運行，竟然出錯了，好吧，是Jquery引用的問題，接下來我又把Index的頁面的引用改成這樣：
好了，頁面不報錯了，但是這樣引用的文件和@Scripts.Render("~/bundles/jquery")這句引用的Jquery文件一樣都在頁面的的最後面，這樣我的上傳按鈕還是沒有樣式，不能實現異步上傳。好了，說了這麼多廢話，最後就是想讓初次遇到這類問題的朋友多多注意默認加載模板頁和Jquery引用的問題。
有什麼不對的地方還希望大家幫忙指出，大家一起分享，共同成長。