jquery + .net mvc3.0 + 无刷新上传文件
jquery + .net mvc3.0 + 无刷新上传文件
----- 概述 -----
1.HTML中 id="form_upload" 表单的target 属性要指向页面中不可见的 iframe( id="hidden_frame")
这样提交到 ifrmae 中的请求会刷新这个不可见的帧
2.使用 TestSubmit() 方法提交数据就是因为方便传一些自定义的参数(currentPath)
3.服务器端的代码自己去研究吧!注意的是如果成功需要调用一个回调函数 UploadCallback
刷新页面,这个回调函数要写在响应流中
----------------
一、HTML 内容
<!--begin 上传文件-->
<div id="divFileUpload" icon="icon-up" style="padding:5px;width:400px;height:200px;">
<form action="UploadFile.aspx" id="form_upload" name="form_upload" encType="multipart/form-data" method="post" target="hidden_frame" >
<input type="file" id="file_upload" name="file_upload" style="width:450">
<span id="upload_msg"></span>
<input type="button" value="上传" onclick="TestSubmit();">
<br>
<font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>
<iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
</form>
</div>
<!--end 上传文件-->
二、页面脚本
<script language="javascript">
//上传后的回调函数(上传文件的输出流调用)
function UploadCallback(msg)
{
// document.getElementById("form_upload").outerHTML = document.getElementById $("form_upload").outerHTML;
if(msg=="false")
{
alert("文件上传失败!");
return;
}
$("#form_upload").val("");
$('#divFileUpload').dialog('close');
ReloadGridData();
}
function TestSubmit()
{
$("#form_upload")
.first()
.attr("action", "UploadFile.aspx?currentPath=" + m_currentPath)
.submit();
}
</script>
三、在 Global.asax 文件中配置的路由
routes.MapRoute(
"Default01", // 路由名称
"{controller}/{action}.aspx/id", // 带有参数的 URL
new { controller = "Explorer", action = "Index", id = UrlParameter.Optional } // 参数默认值
);
四、.NET MVC 中控制器内的方法
public class ExplorerController : Controller
{
/// <summary>
/// 上传文件
/// </summary>
/// <returns></returns>
[HttpPost]
public string UploadFile(string currentPath)
{
if (currentPath.IsNullOrEmpty())
return "false";
string filename = string.Empty;
string path = string.Empty;
foreach (string upload in Request.Files)
{
if (!Request.Files[upload].HasFile())
continue;
filename = Path.GetFileName(Request.Files[upload].FileName);
path = Path.Combine(currentPath.UrlDecode(), filename);
Request.Files[upload].SaveAs(path);
if (System.IO.File.Exists(path))
{
Response.Output.WriteLine("<script language='javascript'>parent.UploadCallback('true')</script>");
return "true";
}
else
{
Response.Output.WriteLine("<script language='javascript'>parent.UploadCallback('false')</script>");
return "false";
}
}
return "false";
}
}