信息收集于互联网
您的位置:主页 > 网络编程 >

网络编程 不使用ajax,实现无刷新上传文件效果

2015-03-13作者:admin来源:未知次阅读

原理:form提交到当前页面中隐藏的一个iframe中,等执行完再调用父页面的js方法hideWaiting

文件一 index.jsp
<script type="text/javascript" language="JavaScript">
 
  function startStatusCheck()
  {
    document.getElementById("status").innerHTML = "uploading ...";
return true;
  }
  
  function hideWaiting(){
alert("iframe子窗口调用来隐藏等待效果");
document.getElementById("status").innerHTML = "upload end";
  }
  </script>
 
  <body>
  <p>通过target等于iframe,模拟无刷新提交数据效果</p>
  <iframe id='target_upload' name='target_upload' src='' style='display: none'></iframe>
  <!-- 当表单提交后,调用startStatusCheck()方法-->
  <form enctype="multipart/form-data" name="fileform" method="post" action="up2.jsp" onsubmit="return startStatusCheck();" target="target_upload">
  <input name="importFile" type="file">
  <input id="submitButton" type="submit" value="上传"/>
  </form>
  <!-- 这里显示进度条 -->
  <div id="status"></div>
</body>
</html>

文件二up2.jsp
<%@ page language="java" pageEncoding="gb2312"%>
<%
   System.out.println("开始执行,休眠5秒钟,表示执行excel操作");
   Thread.sleep(5000);
   System.out.println("执行结束,调用父窗口js方法");
   out.println("<script>");
   out.println("parent.hideWaiting();");
   out.println("</script>");
%>

编辑:admin关键词:

相关文章

图文聚集

热门排行