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

初次使用uploadify上传图片,遇到了一些比较纠结的问题,在这里和大家分享下,有不对的地方还望大神多多指教,希望对刚接触的朋友有所帮助,文采不好还望见谅。新建项目,引用   uploadify脚本啥的就不说了,直接进入主题:

在Index页面放了一个上传图片的按键和脚本代码如下:

 @{
     ViewBag.Title = "Index";
 }
     <br /><br /><br />
     <input id="file_upload"  type="file" value="上传图片" />

 <script src=.js")"></script>
 <link href="~/Content/UploadJS/uploadify.css" rel="stylesheet" />
 <script src="~/Content/UploadJS/jquery.uploadify.min.js"></script>
 <script type="text/javascript">
     $(function () {
         $("#file_upload").uploadify({
             swf: '@Url.Content("~/Content/UploadJS/uploadify.swf")',// 上传使用的 Flash
             uploader: '/Home/Upload',    // 服务器端处理地址
             //显示参数
             width: ,                   // 按钮的宽度
             height: ,                  // 按钮的高度
             buttonText: "上传图片",      // 按钮上的文字
             buttonCursor: "hand",        // 按钮的鼠标图标
             buttonClass: "up_button2",
             fileObjName: 'Filedata',     // 上传参数名称
             //规则参数
             fileSizeLimit: "5000KB",
             fileTypeExts: "*.jpg;*.jpeg;*.png;*.gif",//允许上传的文件扩展名 和下面一起配合使用
             fileTypeDesc: "请选择 jpg、jpeg、png、gif 文件",// 文件说明
             fileSizeLimit: "5MB",         //允许上传的文件大小
             multi: false,                 // 是否支持同时上传多个文件
             removeTimeout: ,
             onUploadSuccess: function (file,data,respose) {
                 var obj = jQuery.parseJSON(data); //把返回的数据序列化为Obj对象
                 if (obj.ret) {
                     alert(obj.FilePath);
                 }
                 else {
                     alert(");
                 }

             }
         })
     })
 </script>

Index 页面

下面是控制器代码:

 public ActionResult Index()
         {
             return View();
         }
         [HttpPost]
         public ActionResult Upload(HttpPostedFileBase Filedata)        {
             )
             {
                 //文件上传后的保存根路径
                 string filePath = Server.MapPath("~/UploadImg/");
                 if (!Directory.Exists(filePath))
                 {
                     Directory.CreateDirectory(filePath);
                 }
                 string fileName = Path.GetFileName(Filedata.FileName);//获取文件原名
                 string fileExtension = Path.GetExtension(fileName);//获取文件扩展名
                 string saveFileName = Guid.NewGuid().ToString() + fileExtension;//要保存的文件名称
                 ;
                  || fileSize <= )
                 {
                     return Json(new { ret = false, message = "文件上传失败,请选择小于1M的图片" });
                 }
                 else
                 {
                     Filedata.SaveAs(filePath + saveFileName);
                     return Json(new { ret=true,FilePath="/UploadImg/"+saveFileName});
                 }
             }
             else
             {
                 return Json(new { ret = false, message = "请选择要上传的文件" });
             }
         }

控制器

在这里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上传图片遇到的蛋疼问题的更多相关文章

  1. 在MVC中利用uploadify插件实现上传文件的功能

    趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同 ...

  2. mvc中使用uploadify批量上传的应用

    网上找了很多资料都没有发现一个好用.可以用的uploadify批量上传的应用,这里通过官方和自己的一些项目需要整理了一个出来. 希望能帮助到需要的人. 效果图:

  3. MVC中使用jquery uploadify上传图片报302错误

    使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...

  4. ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)

    AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...

  5. 调试台自动多出现一个&#39;&amp;#65279;&#39; ,我 用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个&#39;&amp;#65279;&#39;

    对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香! 15:54 2016/3/12用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个' ...

  6. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  7. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  8. MVC中的文件上传-小结

    web开发中,文件的上传是非常基本功能之一. 在asp.net中,通常做法是利用webservice 来接收文件请求,这样做的好处就是全站有了一个统一的文件上传接口,并且根据网站的实际情况,可以将we ...

  9. MVC 使用AJAX POST上传图片的方式

    我们来总结一下使用AJAX以POST方式上传图片的方法. 一.普遍的一种是以file的格式请求.在Request.Files中获取文件. public ActionResult UploadFile( ...

随机推荐

  1. 自定义 bundle 包的创建

    在我们使用第三方框架时,常常看到XXX.bundle的文件. 我们找到该文件,显示包内容,大致看到很多资源文件:图片.配置文本.XIB文件……   什么是Bundle文件? 简单理解,就是资源文件包. ...

  2. OpenGL FAQ

    转自:http://www.cnblogs.com/indif/archive/2011/04/22/2024659.html 1.什么是OpenGL?OpenGL即开放图形库(Open Graphi ...

  3. 浅谈被加壳ELF(即android的so文件)的调试

    本文只讨论如何调试被加壳的ELF文件,包括调试中的技巧运用及调试过程中可能遇到的问题的解决方法,不包含如何还原加固的DEX本文将以某加壳程序和某加固为目标. 一.ELF格式简介 ELF全称:Execu ...

  4. UVALive 5903 Piece it together(二分图匹配)

    给你一个n*m的矩阵,每个点为'B'或'W'或'.'.然后你有一种碎片.碎片可以旋转,问可否用这种碎片精确覆盖矩阵.N,M<=500 WB  <==碎片 W 题目一看,感觉是精确覆盖(最近 ...

  5. OpenGL 纹理贴图

    前一节实例代码中有个贴图操作. 今天就简单说明一下纹理贴图... 为了使用纹理贴图.我们首先需要启用纹理贴图功能. 我们可以在Renderer实现的onSurfaceCreated中定义启用: // ...

  6. ssh+dwr 的使用源码案例

    加入dwr.jar包 ======jsp=============== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  7. MapReduce多用户任务调度器——容量调度器(Capacity Scheduler)原理和源码研究

    前言:为了研究需要,将Capacity Scheduler和Fair Scheduler的原理和代码进行学习,用两篇文章作为记录.如有理解错误之处,欢迎批评指正. 容量调度器(Capacity Sch ...

  8. Please verify you invoked Maven from the correct directory

    解决办法: 在cmd中,把当前路径转换到一个含有pom文件的 项目路径下 再使用 类似下面的deploy就行 mvn deploy:deploy-file -DgroupId=com.taobao.n ...

  9. [Android学习笔记]自定义控件的使用

    自定义控件时,最好抽象得彻底,并且编写需严谨,因为可能程序中多处都会引用到它,或者提供给团队中的其他人使用. 其一般步骤为: 1.创建控件的类文件,定义其功能逻辑.一般继承自现有控件或者View2.在 ...

  10. ndarray数据类型

    dtype(数据类型)是一个特殊的对象,它含有ndarray将一块内存解释为特定数据类型所需的信息 In [18]: sim1 = np.array([1,2,3],dtype=np.float64) ...