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

1. 实现传统的网络文件上传解决方案 首先，我先实现一个传统的网络文件上传方案，建立一个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/