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 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
随机推荐
- android学习笔记43——图形图像处理3——Path
Path类 Path类可以预先在View上将N个点连成一条“路径”,然后调用Canavas的drawPath(path,paint)即可沿着路径绘制图形. android还为路径绘制提供了PathEf ...
- 创建immutable类
不可变对象(immutable objects) 那么什么是immutable objects?什么又是mutable Objects呢? immutable Objects就是那些一旦被创建,它们的 ...
- ThreadPoolExecutor使用介绍
private static ExecutorService exec = new ThreadPoolExecutor(8, 8, 0L,TimeUnit.MILLISECONDS, new Lin ...
- 避免HTML5六种错误用法
一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>--具体地说,就是直接用作替代品(用于样 ...
- Spark RDD简介与运行机制概述
RDD工作原理: 主要分为三部分:创建RDD对象,DAG调度器创建执行计划,Task调度器分配任务并调度Worker开始运行. SparkContext(RDD相关操作)→通过(提交作业)→(遍历RD ...
- IGS_学习笔记01_Integrated SOA Gateway介绍(案例)
2014-01-01 Created By BaoXinjian
- Codeforces Round #365 (Div. 2) Mishka and trip
Mishka and trip 题意: 有n个城市,第i个城市与第i+1个城市相连,他们边的权值等于i的美丽度*i+1的美丽度,有k个首都城市,一个首都城市与每个城市都相连,求所有边的权值. 题解: ...
- mysql5.6优化建议
这篇文章主要介绍了MySQL5.6基本优化配置,详细分解了MySQL5.6需要优化的配置项,最终给出了一个优化案例,需要的朋友可以参考下 随着 大量默认选项的改进, MySQL 5.6比以前版 ...
- 斑马打印机网卡ZebraNet配置(有线)
实图: 抽象图: 说明: 1.并口,用于连接斑马打印机一端 2.网络连接状态指示灯 3.打印状态指示灯 4.测试按钮,在连接打印机的情况下,按下此键,会打印出网卡信息. 5.网线接口 按下测试按钮之后 ...
- 图片_ _图片缓存之内存缓存技术LruCache,软引用
每当碰到一些大图片的时候,我们如果不对图片进行处理就会报OOM异常,这个问题曾经让我觉得很烦恼,后来终于得到了解决,那么现在就让我和大家一起分享一下吧.这篇博文要讲的图片缓存机制,我接触到的有两钟,一 ...