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

  1. uploadHttpData: function (r, type) {
  2.  
  3. var data = !type;
  4. // var data = r;
  5. data = type == "xml" || data ? r.responseXML : r.responseText;
  6.  
  7. // If the type is "script", eval it in global context
  8. if (type == "script")
  9. jQuery.globalEval(data);
  10. // Get the JavaScript object, if JSON is used.
  11. if (type == "json")
  12. {
  13. // eval("data = " + data);
  14. /*++++++++++++++以下为新增代码++++++++++++++++++++++++++*/
  15. var datastr = r.responseText;
  16. var newdatastr = datastr.replace("<pre>", "").replace("</pre>", "");
  17. data = JSON.parse(newdatastr);
  18.  
  19. /*+++++++++++++++以上为新增代码++++++++++++++++++++++++++*/
  20.  
  21. }
  22. // evaluate scripts within html
  23. if (type == "html")
  24. jQuery("<div>").html(data).evalScripts();
  25.  
  26. return data;
  27. },

通用封装后的方法:

  1. function fileUpload(requrl,elementid,modelimgid) {
  2. $("#loading").ajaxStart(function () {
  3. $(this).show();
  4. }).ajaxComplete(function () {
  5. $(this).hide();
  6. });
  7.  
  8. $.ajaxFileUpload(
  9. {
  10. url: requrl,
  11. secureuri: false,
  12. fileElementId: elementid,
  13. dataType: 'json',
  14. data: { name: 'logan', id: 'id' },
  15. success: function (data, status) {
  16. if (typeof (data.Type) !== 'undefined') {
  17. if (data.Type !== 'success') {
  18. alert(data.Data);
  19. } else {
  20. //alert("aaa");
  21. $('#imgshow').show();
  22. $('#imgshow').append("<img src='" + data.Data + "' width='100' height='60' />");
  23. $("#" + modelimgid).val(data.Data);
  24. }
  25. }
  26. },
  27. error: function (data, status, e) {
  28. alert(e);
  29. }
  30. }
  31. )
  32. return false;
  33. }

View 视图中调用:

  1. function ajaxFileUpload() {
  2. var url = "/SkinCategory/UploadFile";
  3. var elementid = "fileToUpload";
  4. var filepath = $("#fileToUpload").val();
  5. var file = $("#fileToUpload");
  6. //validateImage(file);
  7. var modelimgid = "Icon";
  8. return fileUpload(url, elementid, modelimgid);
  9. }
  1. <div class="controls">
  2. <label> 自定义图标 </label>
  3.  
  4. @if (Model != null)
  5. {
  6. if (!string.IsNullOrWhiteSpace(Model.Icon))
  7. {
  8. <span> 当前使用的图标</span>
  9. <img src="@Model.Icon" class="imghref" alt="自定义图标" />
  10. <input type="file" name="fileToUpload" id="fileToUpload" />
  11. }
  12. }
  13. else
  14. {
  15. <span>请上传图标</span>
  16. <input type="file" name="fileToUpload" id="fileToUpload" />
  17. }
  18.  
  19. @Html.HiddenFor(p => p.Icon)
  20. <button id="buttonUpload" onclick=" return ajaxFileUpload();">
  21. 上传
  22. </button>
  23.  
  24. <img id="loading" src="/Content/img/loading.gif" style="display: none;" />
  25. <div id="imgshow" style="display: none;">
  26. </div>
  27.  
  28. </div>

Control 代码:

  1. public ActionResult UploadFile()
  2. {
  3. string savePath = ConfigHelper.GetProConfigString("skinCategory");
  4. HttpPostedFileBase pfile = Request.Files[];
  5. bool success = FileHelper.UploadFile(pfile, ref savePath);
  6. Message msg = Message.UpLoadFileMessage(success);
  7. msg.Data = savePath;
  8. return Json(msg, JsonRequestBehavior.AllowGet);
  9.  
  10. }

效果:

ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)的更多相关文章

  1. 在Asp.Net MVC中使用NPOI插件实现对Excel的操作(导入,导出,合并单元格,设置样式,输入公式)

    前言 NPOI 是 POI 项目的.NET版本,它不使用 Office COM 组件,不需要安装 Microsoft Office,目前支持 Office 2003 和 2007 版本. 1.整个Ex ...

  2. 在ASP.NET MVC中使用JQ插件datatable

    1. Models public class Citys { public int Id { get; set; } public string CityName { get; set; } publ ...

  3. 如何在 ASP.NET MVC 中集成 AngularJS(2)

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  4. 如何在 ASP.NET MVC 中集成 AngularJS(1)

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

  5. Asp.net mvc 中View 的呈现(二)

    [toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...

  6. [Asp.net mvc]Asp.net mvc 中使用LocalStorage

    目前使用比较多的本地存储方案有比如Flash SharedObject.Google Gears.Cookie.LocalStorage.User Data.Open Database等方案.综合比较 ...

  7. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  8. ASP.NET MVC中controller和view相互传值的方式

    ASP.NET MVC中Controller向view传值的方式: ViewBag.ViewData.TempData 单个值的传递 Json 匿名类型 ExpandoObject Cookie Vi ...

  9. 如何在 ASP.NET MVC 中集成 AngularJS(3)

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

随机推荐

  1. sql数据库带补全终端命令

    mysql pip install mycli pgsql pip install pgcli 都是python脚本,记录备忘.

  2. string和stringBuilder区别

    C# String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与 ...

  3. BeX5平台简明部署过程

    http://wex5.com/cn/concise-deployment/ BeX5平台简明部署过程 该文章主要介绍BeX5平台开发完成后,资源部署至正式环境的过程. 一. 获取BeX5企业快速开发 ...

  4. SQL Server 2012 批量重建索引

    关于索引的概念可以看看宋大牛的博客 T-SQL查询高级—SQL Server索引中的碎片和填充因子 整个数据库的索引很多,索引碎片多了,不可能一个个的去重建,都是重复性的工作,所以索性写了个存储过程, ...

  5. 黄聪:C#禁止Webbrowser中的脚本错误提示,自动屏蔽弹出窗口

    using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using ...

  6. DBA_VMware虚拟机安装和简介(案例)

    2014-08-08 Created By BaoXinjian

  7. php 共享内存

    共享内存主要用于进程间通信 php中的共享内存有两套扩展可以实现 1.shmop  编译时需要开启 --enable-shmop 参数 实例: $shm_key = ftok(__FILE__, 't ...

  8. ndk android studio万年坑

    先说javah万年坑 javah语法: Usage: javah [options] <classes> where [options] include: -o <file>  ...

  9. 项目中用到的logback列子

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <appender ...

  10. Java多线程之join

    1.join方法只有在继承了Thread类的线程中才有. 2.线程必须要start() 后再join才能起作用. 将另外一个线程join到当前线程,则需要等到join进来的线程执行完才会继续执行当前线 ...