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)团队开发的一 ...
随机推荐
- bootstrap的引入和使用
Bootstrap的下载 一. 使用Bootstrap第一步,先将生成环境的Bootstrap下载下来.然后将下载,然后引入到自己建好的当前目录中 二.点到起步中的基本模板 将看到的整段代码复制粘贴到 ...
- HyberLedger Fabric学习（3）-chaincode学习（开发者）
参考:http://hyperledger-fabric.readthedocs.io/en/latest/chaincode4ade.html chaincode是由go语言写的,实现了定义的接口. ...
- 迷你MVVM框架 avalonjs 0.83发布
本版本做了如下改进: 重构计算属性, 这是@soom提出的BUG,发现计算属性被某个监控属性向上驱动更新自己时,不会解发$watch回调.详见这里. 强化ms-bind绑定,当第一次扫描时也会执行它的 ...
- js中获取页面元素节点的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 使用透明flash+背景图片制作绚丽页面
关键代码: <div style="width: 469px; height: 303px; background-image: url('https://images0.cnblog ...
- redis的订阅和发布
#订阅和发布有什么用呢?# 特点# 1.实现一个一对多的效果,只有一个发布者,多个订阅者# 2.实时的发布消息,广播方发布消息,所有的订阅者都会受到消息,一个人同时只能接受#一个频道 1.先写一个公共 ...
- windows下使用redis
一.下载windows版本的Redis 官网只提供linux版本的下载 官网下载地址:http://redis.io/download Redis 没有官方的Windows版本,但是微软开源技术团队( ...
- About Game Controllers
[About Game Controllers] Game Controller(GC),框架从iOS 7和OS X v10.9开始加入,用于便捷使用控制器(手柄). Once discovered, ...
- Jenkins 邮箱配置及问题解决
Failed to send out e-mail javax.mail.MessagingException: Could not connect to SMTP host: smtp.rytong ...
- jquery中prop()和attr()的区别
相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在 ...