MVC 中使用uploadify上传图片遇到的蛋疼问题

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引用的问题。

 有什么不对的地方还希望大家帮忙指出，大家一起分享，共同成长。

 

标签: MVC　uploadify图片上传