关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
首先,我先实现一个传统的网络文件上传方案,建立一个web页面,我还需要一个<form>和两个<input>元素就能解决问题,如在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/
转载于:https://www.cnblogs.com/alvacc/archive/2009/11/03/mvc-ajax-upload-file.html
关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现相关推荐
- ASP.NET MVC实现简单的文件上传与下载
使用ASP.NET MVC实现简单的文件上传与下载. 1.上传文件HTML <form action='@Url.Action("Upload", "File&qu ...
- ssm框架下的文件上传和下载
ssm下的文件上传和下载 1. 文件上传 1.1 文件上传需要的依赖 文件上传需要使用到 commons-fileupload 和 commons-io 两个 jar 包. <dependenc ...
- java 文件上传ssm_ssm框架下实现文件上传
1.由于ssm框架是使用Maven进行管理的,文件上传所需要的jar包利用pom.xml进行添加,如下所示: 1.3.1 2.4 commons-io commons-io ${commons-io. ...
- java struts2上传文件_java Struts2框架下实现文件上传功能
本文实例为大家分享了struts2框架实现文件上传的方法,供大家参考,具体内容如下 struts2的配置过程 (1)在项目中加入jar包 (2)web.xml中filter(过滤器)的配置 xmlns ...
- Spring MVC更多家族成员----文件上传---06
Spring MVC更多家族成员----文件上传---06 本节导读 文件上传与MultipartResolver 使用MultipartResolver进行文件上传的简单分析 StandardSer ...
- 【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子
KnockOutJS学习系列----(一) 好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,J. 很多时候可能是因为事情一多,然后没法静下来心来去写点东西,学点东西. 也很抱歉,突然看到 ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Upload ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...
- SSM框架使用Layui文件上传插件实现多文件上传(多文件列表)
SSM框架使用Layui文件上传插件实现多文件上传(多文件列表) pom.xml文件的配置 想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <!--co ...
最新文章
- 结束SQL阻塞的进程
- 市场定位和硬件设计的错误-浅谈GM8126的封装
- yslow客户端性能测试
- STL 之for_each,transform
- .Net基础体系和跨框架开发普及
- linux memcacheQ的安装与使用
- Codeforces Round #390 (Div. 2) A. Lesha and array splitting
- 华为服务器重装操作系统,华为服务器安装操作系统
- 针对Linux学习,值得阅读的五本书籍,不看可能错失机会
- 学习使用php的stripslashe()函数去除反斜杠
- iPhone恢复模式、DFU模式的区别及操作方法
- S2e-env环境及编译学习1
- WhatsApp收不到验证码怎么解决呢?华为手机| 安卓手机| 苹果手机
- ie浏览器的html在哪里,windows10的ie在哪里?ie浏览器找不到怎么办
- 常用CASE工具介绍 ZZ
- nginx+keepalive实现高可用负载均衡
- 【LeetCode】第374题——猜数字大小(难度:简单)
- mysql常用函数笔记
- c++遇到的编译错误
- 各种经典布局--“T”型布局