ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)
AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解决方法如下:
- uploadHttpData: function (r, type) {
- var data = !type;
- // var data = r;
- data = type == "xml" || data ? r.responseXML : r.responseText;
- // If the type is "script", eval it in global context
- if (type == "script")
- jQuery.globalEval(data);
- // Get the JavaScript object, if JSON is used.
- if (type == "json")
- {
- // eval("data = " + data);
- /*++++++++++++++以下为新增代码++++++++++++++++++++++++++*/
- var datastr = r.responseText;
- var newdatastr = datastr.replace("<pre>", "").replace("</pre>", "");
- data = JSON.parse(newdatastr);
- /*+++++++++++++++以上为新增代码++++++++++++++++++++++++++*/
- }
- // evaluate scripts within html
- if (type == "html")
- jQuery("<div>").html(data).evalScripts();
- return data;
- },
通用封装后的方法:
- function fileUpload(requrl,elementid,modelimgid) {
- $("#loading").ajaxStart(function () {
- $(this).show();
- }).ajaxComplete(function () {
- $(this).hide();
- });
- $.ajaxFileUpload(
- {
- url: requrl,
- secureuri: false,
- fileElementId: elementid,
- dataType: 'json',
- data: { name: 'logan', id: 'id' },
- success: function (data, status) {
- if (typeof (data.Type) !== 'undefined') {
- if (data.Type !== 'success') {
- alert(data.Data);
- } else {
- //alert("aaa");
- $('#imgshow').show();
- $('#imgshow').append("<img src='" + data.Data + "' width='100' height='60' />");
- $("#" + modelimgid).val(data.Data);
- }
- }
- },
- error: function (data, status, e) {
- alert(e);
- }
- }
- )
- return false;
- }
View 视图中调用:
- function ajaxFileUpload() {
- var url = "/SkinCategory/UploadFile";
- var elementid = "fileToUpload";
- var filepath = $("#fileToUpload").val();
- var file = $("#fileToUpload");
- //validateImage(file);
- var modelimgid = "Icon";
- return fileUpload(url, elementid, modelimgid);
- }
- <div class="controls">
- <label> 自定义图标 </label>
- @if (Model != null)
- {
- if (!string.IsNullOrWhiteSpace(Model.Icon))
- {
- <span> 当前使用的图标</span>
- <img src="@Model.Icon" class="imghref" alt="自定义图标" />
- <input type="file" name="fileToUpload" id="fileToUpload" />
- }
- }
- else
- {
- <span>请上传图标</span>
- <input type="file" name="fileToUpload" id="fileToUpload" />
- }
- @Html.HiddenFor(p => p.Icon)
- <button id="buttonUpload" onclick=" return ajaxFileUpload();">
- 上传
- </button>
- <img id="loading" src="/Content/img/loading.gif" style="display: none;" />
- <div id="imgshow" style="display: none;">
- </div>
- </div>
Control 代码:
- public ActionResult UploadFile()
- {
- string savePath = ConfigHelper.GetProConfigString("skinCategory");
- HttpPostedFileBase pfile = Request.Files[];
- bool success = FileHelper.UploadFile(pfile, ref savePath);
- Message msg = Message.UpLoadFileMessage(success);
- msg.Data = savePath;
- return Json(msg, JsonRequestBehavior.AllowGet);
- }
效果:
ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)的更多相关文章
- 在Asp.Net MVC中使用NPOI插件实现对Excel的操作(导入,导出,合并单元格,设置样式,输入公式)
前言 NPOI 是 POI 项目的.NET版本,它不使用 Office COM 组件,不需要安装 Microsoft Office,目前支持 Office 2003 和 2007 版本. 1.整个Ex ...
- 在ASP.NET MVC中使用JQ插件datatable
1. Models public class Citys { public int Id { get; set; } public string CityName { get; set; } publ ...
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
- Asp.net mvc 中View 的呈现(二)
[toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...
- [Asp.net mvc]Asp.net mvc 中使用LocalStorage
目前使用比较多的本地存储方案有比如Flash SharedObject.Google Gears.Cookie.LocalStorage.User Data.Open Database等方案.综合比较 ...
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
- ASP.NET MVC中controller和view相互传值的方式
ASP.NET MVC中Controller向view传值的方式: ViewBag.ViewData.TempData 单个值的传递 Json 匿名类型 ExpandoObject Cookie Vi ...
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
随机推荐
- idea系列新版注册模式
http://idea.qinxi1992.cn/ 楼上被列入黑名单,用 http://114.215.133.70:41017/
- ASP.NET网页验证码常用方法
验证码生产类 using System; using System.Data; using System.Configuration; using System.Web; using System.W ...
- Android二-.9.png
1.1px*1px,用于拉伸,应用于背景展示 2.一个复杂图片,拉伸纯色部分(上,左),不可拉伸部分,存放内容(下,右)
- difference between instance variable and property
@interface MyClass : NSObject { NSString *name; NSArray *items; Something *something; IBOutlet NSTex ...
- MVC 安装
mvc 4 支持window xp,window 7,window 8, mvc 4 支持vs2010,vs2012 vs2012中包含mvc4; vs2010中需要安装mvc4 安装包:
- C# WinForm开发系列 - ListBox/ListView/Panel
转自会飞的小猪文章 C# WinForm开发系列 - ListBox/ListView/Panel 在博客园看到了一篇博文,觉得很不错,就转载过来了. 包含自定义绘制的ListBox, 带拖动, ...
- Logs
syslogs Fortinet: http://docs.fortinet.com/fgt.html
- 别去研究C++
转载 YH,今天早晨起来.回想昨天,虽然吐槽了 C++ 的各种问题,但给别人打工,还是要靠 C++ 干活吃饭.我对待 C++ 的态度和云风不同,虽然他所说的 C++ 技术的事情我都懂都理解,而我感受到 ...
- vs2012出现无法启动iis express web 服务器的错误
一直用的好好的,今天调试时却总报上面的错误.“文件查看器”->"windows 日志"->"系统"里发现有几条“HttpEvent”错误, 具体信息 ...
- "undefined reference to" 问题解决方法 -链接问题
最近在Linux下编程发现一个诡异的现象,就是在链接一个静态库的时候总是报错,类似下面这样的错误: (.text+0x13): undefined reference to `func' 关于unde ...