hidden_frame实现不刷新上传文件

最新推荐文章于 2017-04-14 11:01:59 发布

hujiao_jingling

最新推荐文章于 2017-04-14 11:01:59 发布

阅读量2.2k

点赞数

分类专栏： ajax 文章标签： javascript upload xmlhttprequest ajax file iframe

ajax 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用AJAX实现文件上传时页面不刷新的方法。通过设置表单的target属性为隐藏的iframe，可以在提交文件时不触发页面刷新。文章提供了完整的HTML和JSP示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键字：AJAX 上传文件

参考资料：http://www.javaeye.com/topic/81120

文章写出来就是方便自己记忆，也给大家介绍点东西，其实上面的链接里面已经讲的很清楚了。

　　这一段时间在研究AJAX方面的一些东西，就像大家所知道的那样，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.getElementById("file").outerHTML = document.getElementById("file").outerHTML;   
    document.getElementById("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>");   
}   
%>