iframe的使用技巧

    对于上传文件，通常前台上传文件至后台时，后台是一个 Servlet 来处理请求，而 Servlet 处理请求中，通常会有返回页面，所以如果要做到界面显示，而不会让用户感觉有因为上传而产生的刷屏的样子，应该做一个类似于 AJAX 的表现，来进行局部刷新，不过 AJAX 本身而言，并不支持 form 的 post 方式的文件提交，所以不能用 AJAX 来进行上传文件的局部刷新。通常比较好的一种做法是在你的网页中内嵌一个 iframe ，在 iframe 里面做一个 form ，以进行文件上传的提交。具体示例代码见下。

文件名： uploadtest.html

< html >

    < head >

        < title > 文件上传 </ title >

        < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >

    </ head >

    < body >

        < p >

            < b > 文件上传 </ b >

        </ p >

        < br />

       < br />

        < div id = "fileSendDiv" >

                  < iframe width = "100%" height = "35" frameborder = "0" id = "show" name = "show" src = "uploadfile.jsp" scrolling = "no" style = "frameborder:0" align = "left" ></ iframe >

       </ div >

       < br />

       < br />

       < br />

       < br />

       < p >

            < b > 刷新的是 iframe ，父页面不会改变 </ b >

        </ p >

    </ body >

</ html >

该页面注意的是 iframe 的使用，刷新的会是 iframe ， iframe 指向了一个新的文件，文件名叫： uploadfile.jsp ，这个才是真正的上传文件的内容表现，你可以将这个文件作为工具类型的文件，只要在上传文件中通过 iframe 引用这个文件即可（ uploadtest.html 与 uploadfile.jsp 处于同一个目录中）。

上传显示文件代码如下：

文件名： uploadfile.jsp

<%@ page language = "java" import = "java.util.*" pageEncoding = "UTF-8" %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

< html >

    < head >

       < title > 上传文件 </ title >

       < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >

       < meta http-equiv = "pragma" content = "no-cache" >

       < meta http-equiv = "cache-control" content = "no-cache" >

       < script language = "JavaScript" type = "text/javascript" >

       function upload()

       {     

           var filename = document.tab.uploadfile.value;

           if (filename== '' )

           {

               alert( " 没有选择要上传的文件，请选择 !" );

               return ;

           }

          

           document.tab.action = "FileUpload" ; // 提交上传为文件时，所指向的 servlet 配置的 Servlet 动作

           document.tab.target= "show" ; // 指向 iframe 的 ID ，即刷新页面返回时所指的地方。

           document.tab.submit();     

          

       }

    </ script >

    </ head >

    < body style = "margin:0px;" >

       < form name = "tab" method = "post" action = "" enctype = "multipart/form-data" >

           < input type = "file" id = "uploadfile" name = "uploadfile"  style = "border:1px solid black;" >

           < input type = "button" name = "up" value = " 上传 " style = "border:1px solid black;height:20px;" onClick = "upload()" >

       </ form >    

    </ body >

</ html >

需要明确的是该上传文件当调用 upload 之后，其返回所指向的是 ID 为 show 表单，查看 uploadtest.html 中的 iframe 发现，指的就是这个 iframe 的 ID ，所以说当后台的 Servlet 有返回时，刷新的也只是这个 iframe ，而不会影响整个父页面的显示效果。