关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现

======================================================
注：本文源代码点此下载
======================================================

关于jquery在asp.net mvc 框架下ajax文件上传的实现

1. 实现传统的网络文件上传解决方案

首先,我先实现一个传统的网络文件上传方案,建立一个web页面,我还需要一个和两个元素就能解决问题,如在index.aspx文件中有如下元素:

form id="filepost" action="/shared/upload" method="post" enctype="multipart/form-data">

label> filename: input type="file" name="file" />label>

input id="buttonupload" type="submit" value="upload" />

form>

index.aspx中的内容就写好了。我看到action="/shared/upload"里面需要一个“upload”方法响应post请求,可见,我单击【upload】按钮就能将post请求到“upload”这个action里执行后台代码。

后台代码:

public actionresult upload(httppostedfilebase file)

{

if (file.contentlength == 0) {

return redirect("/shared/error");

}

var filename = path.combine(request.mappath("~/upload"),path.getfilename(file.filename));

try{

file.saveas(filename);

return redirect("/home/index");

}catch{

return redirect("/shared/error");

}

}

这样,一个传统的文件上传方案解决。单击【upload】按钮页面将会跳转到“http://...../shared/upload”。

2. 实现网络文件ajax上传解决方案

现在对index.aspx做一部分改动,让文件上传方案实现“ajax”,不需要刷新页面,也能实现文件上传,而且可以很好的处理请求返回,这是我们下一步的目标。

1.在index.aspx页面添加一个元素,用于显示请求返回结果。

如:div id="outputdiv"> div>

2.在http://jquery.malsup.com/form/#download网站下载jquery.form.js文件,我们调用$.ajaxform()或者$.ajaxsubmit()函数,实现目标。

script type="text/javascript">

$(document).ready(function() {

var options = {

target: '#outputdiv',

beforesubmit: showrequest,

success: showresponse

};

$('#filepost').submit(function() {

$(this).ajaxsubmit(options);

return false;

});

});

function showrequest(formdata, jqform, options) {

alert('发送前');

return true;

}

function showresponse(responsetext, statustext) {

alert('发送后');

}

/script>

在index.aspx页面中添加如上代码。

3.在div id="outputdiv"> div>元素中我希望它能显示文件上传的结果,所以,upload方法返回文本就可以,下面修改upload方法如下:

public actionresult upload(httppostedfilebase file)

{

if (file.contentlength == 0) {

return content("没有文件", "text/plain");

}

var filename = path.combine(request.mappath("~/upload"),path.getfilename(file.filename));

try{

file.saveas(filename);

return content("上传成功", "text/plain");

}catch{

return content("上传失败", "text/plain");

}

}

实现ajax文件上传解决方案。关于jquery.form的更多信息,读者可看考http://jquery.malsup.com/form/

标签: mvc, ajax, upload, file

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2009-11-03 14:32 yibu 阅读(961) 评论(2)编辑 收藏

发表评论

1704594

回复 引用 查看

#1楼2009-11-23 11:08 | looksgood

mark

我喜欢使用html.beginform

给出其使用方法。

回复 引用 查看

#2楼[楼主]2009-11-23 11:36 | (*^__^*)

@looksgood

aspx解释以后和原来的标准标签一样。说实话,asp.net的很多控件解释以后都会很乱,比如gridview,解释了就是table,但是却还附加了一堆乱码属性...乱!比较喜欢简洁,舒服!!

注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新it新闻:

·ios 5.1 beta3文件预示未来 siri有可能支持 ipad和 ipod touch

·android平台12月广告浏览份额51.6% 超越ios

·测试版ios源代码显示ipad 3或将支持siri

·斯蒂芬·霍金的新电脑

·京东商城2.95亿竞得北京商业地一块

» 更多新闻...

最新知识库文章:

·javascript 面向对象编程

·持续集成之“everything is code”

·持续集成之“软件自我识别”

·持续集成之戏说check-in dance

·什么是闭包。
       我的理解

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/