jquery + .net mvc3.0 + 无刷新上传文件

秒速五厘米 2024-02-17 20:28 3阅读 0赞

\----- 概述 -----  
1.HTML中 id="form\_upload" 表单的target 属性要指向页面中不可见的 iframe（ id="hidden\_frame"）  
这样提交到 ifrmae 中的请求会刷新这个不可见的帧

2.使用 TestSubmit() 方法提交数据就是因为方便传一些自定义的参数（currentPath）  
3.服务器端的代码自己去研究吧！注意的是如果成功需要调用一个回调函数 UploadCallback  
刷新页面，这个回调函数要写在响应流中  
\----------------

一、HTML 内容  
  
<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="上传" οnclick="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>

二、页面脚本  
<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";  
\}  
\}