|
AJAX最大的特點(diǎn)就是可以不刷新頁(yè)面而實(shí)現(xiàn)數(shù)據(jù)的通信及更改頁(yè)面信息。那么用AJAX進(jìn)行后臺(tái)通信傳遞字符串還是可以的,，遇到上傳文件該怎么辦呢?基于安全考慮JS是不能直接進(jìn)行文件操作的,，那么我們?cè)撛趺崔k呢,？只好又原始的FORM來(lái)提交文件上傳了。這樣一來(lái)有些朋友又該問(wèn)了：用了FORM不就要刷新頁(yè)面么,？其實(shí)也不是,，大家接著看：
給我們的FORM加一個(gè)target屬性，并且將這個(gè)屬性的值設(shè)置為一個(gè)隱藏的iframe的ID,，這樣一來(lái),，刷新的頁(yè)面是我們隱藏的iframe，我們的頁(yè)面就不會(huì)刷新了,。這個(gè)方法,，是廣大前輩的知識(shí)和經(jīng)驗(yàn)的結(jié)晶，我是不費(fèi)吹灰之力拿來(lái)用了,，嘿嘿,，站在巨人的肩上么。
不多說(shuō)了,，大家看代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AjaxUpload</title>
</head>
<body onLoad="javascript:alert('onload')" onUnload="javascript:alert('onunload')">
<form name="AjaxUpload" method="post" action="upload.jsp" target="hidden_frame">
<input type="submit" name="Submit" value="提交">
</form>
<iframe name='hidden_frame' id="hidden_frame" style="display:none"></iframe>
</body>
</html>
上面這段代碼的作用不是上傳文件哦,，僅僅是一個(gè)表單測(cè)試。大家應(yīng)該注意到我在這個(gè)表單里面僅僅添加了一個(gè)提交按鈕,，而且在BODY里面添加了兩個(gè)事件響應(yīng)：onload
和 onunload ,，也就是說(shuō)當(dāng)頁(yè)面加載的時(shí)候會(huì)彈出一個(gè) onload的對(duì)話框，而當(dāng)頁(yè)面卸載的時(shí)候就會(huì)彈出一個(gè)
onunload的對(duì)話框,。大家知道,，如果我們不刷新頁(yè)面的話，整個(gè)過(guò)程僅僅會(huì)彈出一個(gè)onload的對(duì)話框,；而如果我們的提交刷新了頁(yè)面,，那么onunload這個(gè)對(duì)話框也會(huì)彈出來(lái)。
下面我們來(lái)做個(gè)測(cè)試,，將上面的代碼保存為ajaxupload.html,，然后傳到您的服務(wù)器上運(yùn)行。頁(yè)面加載完畢的時(shí)候,，你會(huì)得到一個(gè)onload對(duì)話框,，
當(dāng)你單擊提交按鈕的時(shí)候，并沒(méi)有彈出onunload對(duì)話框,，這樣就說(shuō)明,，我們的頁(yè)面沒(méi)有刷新，也就是我們用hidden_frame實(shí)現(xiàn)了表單的不刷新提交,！
那么,，真的是那個(gè)target屬性在起作用么？好，下面就讓我們來(lái)試驗(yàn)一下：
將上面代碼中的 去掉,，然后再次運(yùn)行您的頁(yè)面,，你然后點(diǎn)擊提交按鈕，你會(huì)發(fā)現(xiàn),，onunload對(duì)話框彈了出來(lái),。
這，說(shuō)明,，您的頁(yè)面刷新了,。
好了，現(xiàn)在我們知道了如何實(shí)現(xiàn)不刷新頁(yè)面而提交表單的效果,，那么我們的不刷新頁(yè)面實(shí)現(xiàn)文件上傳的問(wèn)題也就解決了,！
下面我們來(lái)看用來(lái)實(shí)現(xiàn)這個(gè)效果的完整代碼吧：
AjaxUpload.html
（這里沒(méi)有用XMLHttpRequest來(lái)接收返回的數(shù)據(jù)，要點(diǎn)不是那里,，所以就用了比較簡(jiǎn)單的方法）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AjaxUpload</title>
</head>
<body onLoad="javascript:alert('onload')" onUnload="javascript:alert('onunload')">
<form name="AjaxUpload" method="post" action="upload.jsp" target="hidden_frame">
<input name="file" type="file"><input type="submit" name="Submit" value="提交">
</form>
<iframe name='hidden_frame' id="hidden_frame" style="display:none"></iframe>
<span id="returnmsg"></span>
<script language="JavaScript" type="text/javascript">
function callback(returnmsg)
{
document.getElementByIdx_x("file").outerHTML = document.getElementByIdx_x("file").outerHTML;
document.getElementByIdx_x("returnmsg").innerHTML = returnmsg;
}
</script>
</body>
</html>
Upload.jsp?。ㄟ@里的代碼用到了smartupload包，大家可以先去下載這個(gè)包在測(cè)試）
<%@ page language="java" contentType="text/html; charset=gb2312" %>
<%@ page import="com.jspsmart.upload.SmartUpload"%>
<%
SmartUpload su = new SmartUpload();
su.initialize(pageContext);
su.setTotalMaxFileSize(20*1024*1024);
boolean sign = true;
try
{
su.upload();
su.save("c:\\upload");
} catch (Exception e)
{
e.printStackTrace();
sign = false;
}
if(sign==true)
{
out.println("<script>parent.callback('upload file success')</script>");
}
else
{
out.println("<script>parent.callback('upload file error')</script>");
}
%>
這兩個(gè)頁(yè)面就是上傳文件到C盤(pán)的upload文件夾里面,，如果你的C盤(pán)沒(méi)有upload文件夾或者沒(méi)有C盤(pán)的話,，就會(huì)返回Upload
error。
|
