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)团队开发的一 ...
随机推荐
- id取模分表
场景 1 假设按用户id分2个库 每个库分10张表. 分表策略 1.用户id%2 确定库 用户id%3确定表. 2.(用户id%(2*10))/ 10 取整确定库,(用户id%(2*10)%10确 ...
- JS中的this机制
1.this是啥? 简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是this倒地指引啥东西却让很多人张二摸不着头脑.这里我们留个小悬念,希 ...
- vim删除行首数字
- 图片拼接SIFT
图片拼接 SIFT: 特征点处理:位置插值,去除低对比度点,去除边缘点 方向估计 描述子提取 下面的程序中使用: 第一步: 使用SIFT生成器提取描述子和特征 第二步: 使用KNN检测来自A,B图的S ...
- nodepad++快捷键
在用notepad++进行代码编辑的过程中,其实notepad++也可以进行单行.多行.区块注释和取消注释的....... 快捷键如下: 单行.多行注释 //方式 ...
- oracle中bulk collect into用法
通过bulk collect减少loop处理的开销 采用bulk collect可以将查询结果一次性地加载到collections中. 而不是通过cursor一条一条地处理. 可以在select in ...
- Ubuntu切换阿里源
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak #备份 sudo vim /etc/apt/sources.list #修改 sudo ...
- NoSQL数据库笔谈
NoSQL数据库笔谈 databases , appdir , node , paper颜开 , v0.2 , 2010.2 序 思想篇 CAP 最终一致性 变体 BASE 其他 I/O的五分钟法则 ...
- Laravel 使用 Provider 为程序提供运行时配置服务
需求: 配置参数存在数据库中,Model 是 aah,需要在每次运行时,程序可以在任何地方采用 config("aah.name") 的方式访问配置信息. 思路: 采用 Provi ...
- linux git server 简易搭建 （ssh访问）
git的服务器搭建,如果无需权限控制,仅团队内部使用,初始化一个服务器仓库,其他人通过ssh访问这个文件夹即可.如需复杂的管理,建议使用gitlab. yum install git -y id gi ...