Iframe 无刷新上传文件

1、【html 代码，主体是iframe与from表单的代码】

<span style="margin-bottom:10px;"><a href="#" onclick="showdiv();" title="iframe无刷新上传" class="shortcut">[修改头像]</a></span>

<div id="bg"></div>

   <div id="show">

<div style="height:25px;line-height:25px;background-color:#EAEAEA;"><span style="margin-left:5px">【上传】</span><span style="float:right;"><a href="javascript:void(0);"onclick="hidediv();">【X】</a></span></div>

 

<div style="margin-top:10px;">

      <iframe style="display:none" name="ifm"></iframe>

      <form action="/Index/uploadFiles" target="ifm" method="post"enctype="multipart/form-data">

         上传文件：<input type="file"name="headpic" id="headpic"/>&nbsp;&nbsp;<input type="submit" name="sub"value="上传"  />

      </form>

   </div>

</div>

注：from表单中的target属性是必须的，属性名称与iframe中的name属性名称须一致。

这是在一个遮罩层里的，遮罩层代码由css样式与js控制完成，如下：

   Css代码：

   <style type="text/css">

       #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}

         #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}

   </style>

   Js代码

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

       //显示遮罩层

         function showdiv(){          

             document.getElementById("bg").style.display ="block";

             document.getElementById("show").style.display ="block";

         }

       //取消遮罩层的显示

         function hidediv(){

             document.getElementById("bg").style.display ='none';

             document.getElementById("show").style.display ='none';

         }

         //上传成功后调用

         function callback(file_name){

           //设置刚上传的图片路径

             document.getElementById("headers").setAttribute("src", file_name);

             hidediv ();

         }

        

     </script>

 

服务器处理上传代码（PHP语言）：

if($_FILES['headpic']['error'] > 0){

           echo "<script>alert('没有上传图片或图片有误!');</script>";

       }else{

           $myfile= $_FILES;

           $size= 10*1024*1024;

           if($myfile['headpic']['size']<=$size){

              //判断类型

              $fileInfo= pathinfo($myfile['headpic']['name']);

              if($fileInfo['extension'] =='jpg' || $fileInfo['extension'] =='png' || $fileInfo['extension'] == 'jpeg'){

                  $file_path= "./files/";

                  //$filename =date("YmdHis").mt_rand(100,999).".".$fileInfo['extension'];

                  $filename= date("Ymd-His"). "." .$fileInfo['extension'];

          

          

                  //$filename = iconv("UTF-8","GBK",$filename);

                  $extension= $fileInfo['extension'];

                  //上传文件的函数

          

                  if(move_uploaded_file($myfile['headpic']['tmp_name'],$file_path.$filename)){

                     //处理图片的规格开始

                     //return array("scanName" =>$filename,"errorMsg" => "success");

                     //echo $file_path . $filename;

                     $user= $this->Session->read("userInfo");

                     $ret= $this->Index->updateHeader($user[0]['xa']['id'], $filename);

                     if($ret){

                         echo "<script>parent.callback('/files/". $filename . "');</script>";

                     }else{

                         echo "<script>alert('上传失败!');</script>";

                     }

                    

                  }

              }

           }

       }

 

这样基本上就可以完成iframe无刷新上传了！其实，利用iframe上传实现的无刷新上传，刷新的应该是iframe,在form表单中其实多了一个target属性，其名称与iframe中的name属性一致。如果没有target这个属性的话，就是跳转页面上传（自己的理解）。