使用iframe实现无刷新上传文件

很简单，如下代码：

<form method="post" target="hidden_frame" action="importExcel.jsp" enctype="multipart/form-data">
           <table>
            <tr>
             <td width="300px">
              <input type="file" name="filename" value="选择文件" />
              <input type="submit" value="导入"></input>  
             </td>
            </tr>
           </table>
           <iframe style="display: none;" id="hidden_frame" name="hidden_frame"></iframe>

</form>

如上代码，只要设置一个隐藏的iframe，然后设置form的target为iframe的name属性的值，那么form提交的连接就会在iframe里执行

 

importExcel.jsp代码如下：

<%@page import="com.longtop.acutmgt.ysdr.web.TYsdrImportInitiationAction"%><%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%><%
TYsdrImportInitiationAction  parsefile= new TYsdrImportInitiationAction();
 String filePath=parsefile.uploadFile(request, response);
 if(null!=filePath){
  response.setContentType("text/html;charset=utf-8");
  response.getWriter().print("<script language='javascript'>parent.callback('"+filePath.replaceAll("\\\\","\\\\\\\\")+"')</script>");
}
%>

 

callback是包含iframe的页面的js函数，执行完iframe后将执行该函数，代码如下：

//上传Excel后回调函数
 function callback(msg){
  alert(msg);
 }

这样就可完成一个无刷新的页面上传文件功能了，具体的上传操作有不同实现方法，这里不做介绍。

我也是刚学会这种方法，记录下来，以免忘了。。。