ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例
HTML代码 和js 代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/js/jquery-1.8.3.min.js"></script>
<script src="~/js/ajaxfileupload.js"></script>
<script type="text/javascript">
$(function () {
$("#butLoad").click(function () {
$("#img1").attr("src", "../images/timg.gif");
//调用action
$.ajaxFileUpload({
url: "../Upload/UpLoad",
secureuri: false, //一般设置为false
fileElementId: 'Img', //文件上传空间的id属性 <input type="file" id="Img" name="file" />
dataType: 'json', //返回值类型
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
});
});
$("#butLoadAsp").click(function () {
$("#imgAsp").attr("src", "../images/timg.gif");
//调用aspx
$.ajaxFileUpload({
url: "../Ajax/UpLoad.aspx?__Action=UpLoadImg",
secureuri: false, //一般设置为false
fileElementId: 'ImgAsp', //文件上传空间的id属性 <input type="file" id="Img" name="file" />
dataType: 'json', //返回值类型
success: function (data, status) //服务器成功响应处理函数
{
$("#imgAsp").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
});
});
});
function ChImages(obj) {
$("#img1").attr("src", obj.value)
}
</script>
</head>
<body>
<div>
<h3>mvc-ajax</h3>
<input type="file" id="Img" name="file" onchange="ChImages(this)" /> @*注意：name一定要写*@
<button id="butLoad">上传</button>
<img src="" id="img1" alt="请选择图片" width="" />
</div>
<div>
<h3>asp.net-ajax</h3>
<input type="file" id="ImgAsp" name="file" /> @*注意：name一定要写*@
<button id="butLoadAsp">上传</button>
<img src="" id="imgAsp" alt="请选择图片" width="" />
</div>
</body>
</html>
mvc 控制中代码
[HttpPost]//过滤
public JsonResult UpLoad()
{ HttpFileCollectionBase files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
object result = new { error="error", msg="上传失败",imgurl= files[].FileName};
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > )
{
string savePath = Server.MapPath("/") + "UpLoadImg\\";//保存文件地址
//string saveDir = System.Web.HttpContext.Current.Server.MapPath(savePath);
if (!Directory.Exists(savePath)) {
Directory.CreateDirectory(savePath);
}
files[].SaveAs(savePath + System.IO.Path.GetFileName(files[].FileName));
msg = " 成功! 文件大小为:" + files[].ContentLength;
imgurl = "../UpLoadImg/" + files[].FileName;
result =new { error="success", msg= msg, imgurl=imgurl };
}
return Json(result, "text/html");
}
aspx.cs 代码
public partial class UpLoad : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string action = Request["__Action"];
if (action==null || action == string.Empty)
return;
Page p = this;
Type pageType = p.GetType();
MethodInfo method = pageType.GetMethod(action);
if (method != null)
method.Invoke(p, null);
}
public void UpLoadImg()
{
HttpFileCollection files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
// object result = new { error = "error", msg = "上传失败", imgurl = files[0].FileName };
string result = "{ error:'error', msg:'上传失败',imgurl:'" + files[].FileName + "'}";
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > )
{
string savePath = Server.MapPath("/") + "UpLoadImg\\";//保存文件地址
//string saveDir = System.Web.HttpContext.Current.Server.MapPath(savePath);
if (!Directory.Exists(savePath))
{
Directory.CreateDirectory(savePath);
}
files[].SaveAs(savePath + System.IO.Path.GetFileName(files[].FileName));
msg = " 成功! 文件大小为:" + files[].ContentLength;
imgurl = "../UpLoadImg/" + files[].FileName;
result = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
}
Response.Clear();
Response.Write(result.ToString());
Response.End(); }
}
MVC和aspx 有些不同，MVC获取HttpInputFile 用HttpFileCollectionBase 类，aspx获取HttpInputFile 用HttpFileCollection 类
个人学习，请多多指教
代码：http://files.cnblogs.com/files/BensonHai/UploadImage.rar 本人是用VS2015写的
ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例的更多相关文章
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件） ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字， C# WinForm 中英文实现， 国际化实现的简单方法 ASP.NET Core 2 学习笔记（六）ASP.NET Core 2 学习笔记（三）
sql server 关于表中只增标识问题 由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...
- ASP.NET MVC 中使用 AjaxFileUpload 插件时，上传图片后不能显示（预览）
AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...
- aspx页面中用Input 标签实现上传图片功能
实现上传图片功能需单独的建立一个aspx页面, 其中前台页面需要注意两点: a)实现上传功能的input的type="file" b)设置请求报文头为 enctype=" ...
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)
参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...
- MVC ueditor的使用(实现上传图片功能)
之前使用ckeditor不能实现上传图片功能,只要是我不知道怎么使用啦o(￣ε￣*),然后就换了ueditor~~,可以实现上传图片功能啦~\(≧▽≦)/~~ 下面是我的步骤:去官网下载最新版uedi ...
- ajaxFileUpload插件
关键词: $.ajaxFileUpLoad(); data status dataType 参考资料: http://www.cnblogs.com/kissdodog/archive/2012/12 ...
- 实用的ajaxfileupload插件
一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...
- 富文本文件CKEDITOR增加上传图片功能(.net)
如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...
- 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收
利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
随机推荐
- Android Studio 使用socks代理
Android Studio 使用socks代理 准备工作 1. 从https://www.privoxy.org/下载Privoxy软件 2. 安装Privoxy 3. 在Privoxy安装目录找到 ...
- （转）Chrome开发者工具不完全指南（一、基础功能篇）
本篇转载自卖烧烤夫斯基,并做了小部分的修改. 原文地址:Chrome开发者工具不完全指南(一.基础功能篇) 原作者:卖烧烤夫斯基 就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生 ...
- MVC-READ2
框架设计模式 契约式设计.元编程.元数据驱动设计.管道模型.远程代理模式.提供程序模型:
- ubuntu server 安装nextcloud12
1.更新系统安装必要的依赖包 [user]$ sudo apt-get update && sudo apt-get -y upgrade [user]$ sudo apt-get i ...
- S EAI 客户主数据导入_test(detail)
一. 客户主数据模板导出 客户主数据和新联系人导入 Account_Config.ini文件 [Public] ConnectString=host="siebel://10.10.1.15 ...
- SpringBoot配置Shiro时@RequiresRoles不起作用
在SpringBoot中配置Shiro,结果@RequiresRoles.@RequiresPermissions等注解都无效 解决方法: 在ShiroConfiguration中注入开启支持aop. ...
- selenium IDE测试中的坑
selenium IDE工具是firefox自带的一个网页自动化测试工具,因为它是IDE所以它很方便使用,但也因为它是IDE所以它有那么些坑. 问题:selenium回放中timeout问题 网页的打 ...
- 运行Junit单测时遇到的问题
现在有两个办法解决: 1.junit版本降到4.10 2.导入hamcrest-core-1.3.jar 官网:JUnit now uses the latest version of Hamcres ...
- dwz监听日期变化,dwz日期控件onchange不起作用,dwz框架时间控件不支持onchange事件
转载自:http://blog.csdn.net/sp308036654/article/details/50638348 <input type="text" class= ...
- button作用类似于submit
不想提交,可使用以下 <a href="javascript:;" >修改</a>