传统的上传文件功能，点击“上传”后页面会短暂地空白，等待服务器的响应；为了提高网站的处理效率，采用模拟Ajax的无刷新假象技术，我们可以让页面在局部刷新的情况下，实现文件上传。

    demo.html

 
     
           function callback(filename){         //"$()"是封装在单独js文件中的函数:document.getElementById(id)         $('photo').style.display = "none";         $('submit').style.display = "none";         $('msg').innerHTML = filename;} 
     

     
         
     
              照片：
                    
      
      
        
      
       
           
       
         
       
      
     

    upload.php

 //文件上传 if (!empty($_POST['submit'])){    $extname = strrchr($_FILES['photo']['name'],'.');    $filename = time().$extname;    $file = $_FILES['photo']['tmp_name'];    copy($file,'upload/'.$filename);    echo "";

    流程解释

    Browser选择完要上传的文件后，点击上传文件按钮，此时body（一级框架）没有如愿将此文件提交到action="upload.php",而是target="frm"对应的iframe框架来提交;iframe是次于body框架的二级框架，由二级框架iframe发出上传请求，将文件上传给action="upload.php"；在上面的html代码当中，iframe框架style="display:none",为了页面美观，我们是看不见的，如果你想看到，就设为“block”。此时页面其实有刷新，但不是整个body刷新，而是二级框架iframe刷新，由于iframe是隐藏的，而且真正的iframe默认的页面面积是很小的，导致我们认为页面是无刷新的，假象就此出现了。

   echo "";

    前台等待后台的响应，后台返还js脚本调用前台一级框架的callback()函数。注意，如果没有"parent"对象，返还的js脚本就要在iframe里面执行，而我们想要js脚本在body里面执行，那么想法就成立了;还有一点，有没有发现，“上传文件、返还js脚本”这两个动作的承受者都iframe，而不是body，而且程序的执行是这样的body<=>iframe<=>upload，iframe完全是作为中间受众来体现他的价值。

    callback(filename)函数接收后台传递过来的图片文件名后，主要做了两件事，隐藏上传文件的路径框、显示上传成功的图片名称。