1. 程式人生 > >iframe實現無重新整理上傳檔案

iframe實現無重新整理上傳檔案

其實在ajax出現之前,web應用也可以是無重新整理的,那時大多通過IFrame來做到這一點。當然Ajax出現之後,人們一窩蜂地投奔Ajax 的陣營了,iFrame 就乏人問津了。但是用iFrame來實現無重新整理上傳檔案確實一個很好的選擇。

[html] view plaincopyprint?
  1. <html>     
  2. <body>     
  3. <form action="upload.jsp" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame" >     
  4.     <input type
    ="file" id="file" name="file" style="width:450">     
  5.     <INPUT type="submit" value="上傳檔案"><span id="msg"></span>     
  6.     <br>     
  7.     <font color="red">支援JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI檔案的上傳</font>                   
  8.     <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>     
  9. </form>     
  10. </body>     
  11. </html>     
  12. <script type="text/javascript">     
  13. function callback(msg)     
  14. {     
  15.     document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;     
  16.     document.getElementById("msg").innerHTML = "<font color=red>"+msg+"</font>";     
  17. }     
  18. </script>    
<html>   
<body>   
  
<form action="upload.jsp" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame" >   
    <input type="file" id="file" name="file" style="width:450">   
    <INPUT type="submit" value="上傳檔案"><span id="msg"></span>   
    <br>   
    <font color="red">支援JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI檔案的上傳</font>                 
    <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>   
</form>   
  
</body>   
</html>   
  
<script type="text/javascript">   
function callback(msg)   
{   
    document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;   
    document.getElementById("msg").innerHTML = "<font color=red>"+msg+"</font>";   
}   
</script>  


原理就是輸出一段js程式碼到 iframe 中,然後在iframe中來控制它的父頁面

[javascript] view plaincopyprint?
  1. <%@ page language="java" contentType="text/html; charset=gb2312" %>     
  2. <%@ page import="com.jspsmart.upload.SmartUpload"%>     
  3. <%     
  4.     //新建一個SmartUpload物件      
  5.     SmartUpload su = new SmartUpload();     
  6.     //上傳初始化      
  7.     su.initialize(pageContext);     
  8.     // 設定上傳限制      
  9.     //1.限制每個上傳檔案的最大長度。      
  10.     su.setMaxFileSize(10000000);     
  11.     //2.限制總上傳資料的長度。      
  12.     su.setTotalMaxFileSize(20000000);     
  13.     //3.設定允許上傳的檔案(通過副檔名限制),僅允許doc,txt檔案。      
  14.     su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");     
  15.     boolean sign = true;     
  16.     //4.設定禁止上傳的檔案(通過副檔名限制),禁止上傳帶有exe,bat,jsp,htm,html副檔名的檔案和沒有副檔名的檔案。      
  17.     try {     
  18.         su.setDeniedFilesList("exe,bat,jsp,htm,html");     
  19.         //上傳檔案      
  20.         su.upload();     
  21.         //將上傳檔案儲存到指定目錄      
  22.         su.save("c:\\");    
  23.     } catch (Exception e) {    
  24.         e.printStackTrace();    
  25.         sign = false;    
  26.     }    
  27.     if(sign==true)    
  28.     {    
  29.         out.println("<script>parent.callback('upload file success')</script>");    
  30.     }else    
  31.     {    
  32.         out.println("<script>parent.callback('upload file error')</script>");     
  33.     }     
  34. %>     
<%@ page language="java" contentType="text/html; charset=gb2312" %>   
<%@ page import="com.jspsmart.upload.SmartUpload"%>   
  
<%   
    //新建一個SmartUpload物件   
    SmartUpload su = new SmartUpload();   
  
    //上傳初始化   
    su.initialize(pageContext);   
  
    // 設定上傳限制   
    //1.限制每個上傳檔案的最大長度。   
    su.setMaxFileSize(10000000);   
  
    //2.限制總上傳資料的長度。   
    su.setTotalMaxFileSize(20000000);   
  
    //3.設定允許上傳的檔案(通過副檔名限制),僅允許doc,txt檔案。   
    su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");   
       
    boolean sign = true;   
       
    //4.設定禁止上傳的檔案(通過副檔名限制),禁止上傳帶有exe,bat,jsp,htm,html副檔名的檔案和沒有副檔名的檔案。   
    try {   
        su.setDeniedFilesList("exe,bat,jsp,htm,html");   
  
        //上傳檔案   
        su.upload();   
        //將上傳檔案儲存到指定目錄   
        su.save("c:\\");  
 
    } 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>");   
    }   
%>