最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > php教程 >

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

时间:2014-06-09 16:40来源: 作者: 点击:
iframe无刷新文件上传其实就是在当前页面打开了上传程序的页面,有点像ajax局部刷新一个,只是我们把它放到了iframe页面中上传,同时我们把iframe页面给隐藏了。 一个最原始最简单的iframe上传例子

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

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

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

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

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

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

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

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

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

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

  1. <script src="tiny_mce/tiny_mce.js" type="text/javascript"></script> 
  2. <script type="text/javascript"
  3.     // O2k7 skin 
  4.     tinyMCE.init({ 
  5.         // General options 
  6.         mode : "exact"
  7.         elements : "content"
  8.         theme : "advanced"
  9.         skin : "o2k7"
  10.         language : "zh"
  11.         relative_urls : false
  12. //....略过部分... 
  13.     }); 
  14.     function InsertHtml(type,path){ 
  15.         type=type.toLowerCase() 
  16.         switch(type){ 
  17.             case '.gif'
  18.             thecode = '<img src="'+path+'" alt=""/>'
  19.             break
  20.             case '.jpg'
  21.             thecode = '<img src="'+path+'" alt=""/>'
  22.             break
  23. //......略过部分...... 
  24.             default : 
  25.             thecode = '<a href="'+path+'" target="_blank">Download</a>'
  26.             break
  27.         } 
  28.         tinyMCE.execCommand('mceInsertContent',true,thecode); 
  29.     } 
  30. </script> 

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

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

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

(责任编辑:admin)
------分隔线----------------------------
栏目列表
推荐内容