Asp.net mvc4用JQuery插件实现异步上传
下载异步上传插件AjaxFileUploader，下载地址：http://phpletter.com/DOWNLOAD/
解压，保存在 asp.net mvc项目的一个文件夹下，如下图：
1. Controller层
public ActionResult View3()
{
return View();
}
[HttpPost]
public ActionResult View3(HttpPostedFileBase file)
{
if (file == null)
{
return Content("没有文件！", "text/plain");
}
var fileName = Path.Combine(Request.MapPath("~/UploadFiles"), Path.GetFileName(file.FileName));
try
{
file.SaveAs(fileName);
return Content("上传成功！", "text/plain");
}
catch
{
return Content("上传异常 ！", "text/plain");
}
}
2. View层：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<script src=\'#\'" /Scripts/jquery-1.7.1.min.js"></script>
<script src=\'#\'" /ajaxfileupload/jquery.js"></script>
<script src=\'#\'" /ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUploads() {
$("#loading").ajaxStart(function () {
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function () {
$(this).hide();
});//文件上传完成将图片隐藏起来
$.ajaxFileUpload({
url: '/Test/View3',//后台处理的action
secureuri: false,
fileElementId: 'file',//上传的控件名
dataType: 'text',
success: function (data, status) {
$("#mydiv").html( data);
},
error: function (data, status, e) {
$("#mydiv").html( data + "
" + e);
}
})
return false;
}
</script>
</head>
<body>
<input type="file" id="file" name="file" />
<img src=\'#\'" /ajaxfileupload/loading.gif" width="20px" height="20px" id="loading" style="display: none;">
<span id="mydiv" style="color: green;"></span>
<br />
<input type="button" value="上传" ajaxFileUploads();">
</body>
</html>