好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

iframe无刷新文件上传实现程序 - php上传下载

iframe无刷新文件上传实现程序

iframe无刷新文件上传其实就是在当前页面打开了上传程序的页面,有点像ajax局部刷新一个,只是我们把它放到了iframe页面中上传,同时我们把iframe页面给隐藏了。

一个最原始最简单的iframe上传例子: 本例中采用iframe名字,所以表单在提交时会在iframe内打开链接(即无刷新,确切的说应该是感觉无刷新),在表单提交时,调用startUpload方法,当然这是JS定义的。

前台上传页面index.html,主要是一个表单与一个js回调函数,上传文件时,form表单的method、 enctype属性必须和下面代码一样。然后将target的值设为iframe的name,这样就可以实现无刷新上传文件,代码如下:

< title > 上传文件 </ title >     < script >     function CallbackFunction(str){    alert("上传成功");    }    </ script >     < form   action = "uploadfile.php"   enctype = "multipart/form-data"   method = "post"   target = "iframeUpload" >       < iframe   name = "iframeUpload"   src = ""   width = "350"   height = "35"   frameborder = 0    SCROLLING = "no"   style = "display:NONE" > </ iframe >       < input   id = "test_file"   name = "test_file"   type = "file" >       < input   value = "上传文件"   type = "submit" >     </ form >   

后台上传处理页面uploadfile.php,这段代码为简单的上传代码,没有进行错误及异常处理。上传代码执行完成后,要告诉父页面已经上传完毕了,因此,在这个页面里调用父页面的回调函数CallbackFunction,这个函数可以有参数,形式自己定义,代码如下:

<?php    set_time_limit(0);    if ( $_SERVER [ 'REQUEST_METHOD' ]== 'POST' ) {      move_uploaded_file( $_FILES [ "test_file" ][ "tmp_name" ],      dirname( $_SERVER [ 'SCRIPT_FILENAME' ]). "/UploadTemp/"  .  $_FILES [ "test_file" ][ "name" ]);       echo   "<script>window.parent.CallbackFunction();</script>" ;    }   ?> 

以上是用iframe实现无刷新上传文件的简单方法,想要健壮的程序的话需要再细化.

PHP无刷新实例2: PHP利用iframe上传文件并返回值到父框架,其实也是采用这样的做发法的,正好看到有童鞋博客上有这样写,就顺手贴过来了,代码如下:

if ( $result )       {      echo   "上传成功!文件路径为:" . $file2 ;      echo   '<input name="img" type="hidden" value="' . $file2 . '" id="img"/>' ;      echo '<script>parent.document.form1.img.value=document.getElementById("img").value;</script>' ;      } 

文件上传成功后,把文件路径写入一个隐藏的域中(img),然后用DOM原理把隐藏域中的VALUE发送到父框架的表单form1的img文本框中:ok,编辑器用了tinyMCE,所以有一点点不一样,我的form页,代码如下:

<script src= "tiny_mce/tiny_mce.js"  type= "text/javascript" ></script>  <script type= "text/javascript" >       // O2k7 skin       tinyMCE.init({           // General options           mode :  "exact" ,          elements :  "content" ,          theme :  "advanced" ,          skin :  "o2k7" ,          language :  "zh" ,          relative_urls :  false ,  //....略过部分...       });       function  InsertHtml(type,path){          type=type.toLowerCase()           switch (type){               case   '.gif' :              thecode =  '<img src="' +path+ '" alt=""/>' ;               break ;               case   '.jpg' :              thecode =  '<img src="' +path+ '" alt=""/>' ;               break ;  //......略过部分......                default  :              thecode =  '<a href="' +path+ '" target="_blank">Download</a>' ;               break ;          }          tinyMCE.execCommand( 'mceInsertContent' , true ,thecode);      }  </script> 

iframe也就是在这个页面里了,在我的iframe的提交给的php处理里,代码如下:

$pasteJS  =  "<script type=text/javascript>n" ;  $pasteJS  .=  "parent.InsertHtml(" " . $file_ext . " "," " . $upload_src . " ");n" ;  $pasteJS  .=  "</script>n" ;  echo   $pasteJS ; 

于是上传的文件就跑到tinyMCE的编辑框里了,upload的文件路径也通过userdata会暂存起来,直到写入database。路径保存这块儿,也是在iframe的提交给的php处理文件里的,这里就不多写了。

查看更多关于iframe无刷新文件上传实现程序 - php上传下载的详细内容...

  阅读:47次