|
AJAX最大的特点就是可以不刷新页面而实现数据的通信及更改页面信息。那么用AJAX进行后台通信传递字符串还是可以的，遇到上传文件该怎么办呢?基于安全考虑JS是不能直接进行文件操作的，那么我们该怎么办呢？只好又原始的FORM来提交文件上传了。这样一来有些朋友又该问了：用了FORM不就要刷新页面么？其实也不是，大家接着看：
给我们的FORM加一个target属性，并且将这个属性的值设置为一个隐藏的iframe的ID，这样一来，刷新的页面是我们隐藏的iframe，我们的页面就不会刷新了。这个方法，是广大前辈的知识和经验的结晶，我是不费吹灰之力拿来用了，嘿嘿，站在巨人的肩上么。
不多说了，大家看代码：
<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>
上面这段代码的作用不是上传文件哦，仅仅是一个表单测试。大家应该注意到我在这个表单里面仅仅添加了一个提交按钮，而且在BODY里面添加了两个事件响应：onload
和 onunload ，也就是说当页面加载的时候会弹出一个 onload的对话框，而当页面卸载的时候就会弹出一个
onunload的对话框。大家知道，如果我们不刷新页面的话，整个过程仅仅会弹出一个onload的对话框；而如果我们的提交刷新了页面，那么onunload这个对话框也会弹出来。
下面我们来做个测试，将上面的代码保存为ajaxupload.html，然后传到您的服务器上运行。页面加载完毕的时候，你会得到一个onload对话框，
当你单击提交按钮的时候，并没有弹出onunload对话框，这样就说明，我们的页面没有刷新，也就是我们用hidden_frame实现了表单的不刷新提交！
那么，真的是那个target属性在起作用么？好，下面就让我们来试验一下：
将上面代码中的 去掉，然后再次运行您的页面，你然后点击提交按钮，你会发现，onunload对话框弹了出来。
这，说明，您的页面刷新了。
好了，现在我们知道了如何实现不刷新页面而提交表单的效果，那么我们的不刷新页面实现文件上传的问题也就解决了！
下面我们来看用来实现这个效果的完整代码吧：
AjaxUpload.html
（这里没有用XMLHttpRequest来接收返回的数据，要点不是那里，所以就用了比较简单的方法）
<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包，大家可以先去下载这个包在测试）
<%@ 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>");
}
%>
这两个页面就是上传文件到C盘的upload文件夹里面，如果你的C盘没有upload文件夹或者没有C盘的话，就会返回Upload
error。
|
