要实现无刷新文件上传我们有一种假像的做法就是使用iframe框架实现文件上传,另一种就是利用ajax实现文件上传了,这两种方法都可以达到无刷新文件上传功能。 一个最原始最简单的iframe上传例子: 前台上传页面index.html,主要是一个表单与一个js回调函数。上传文件时,form表单的method、 enctype属性必须和下面代码一样。然后将target的值设为iframe的name,这样就可以实现无刷新上传文件。
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
02 <html xmlns= " http://www.w3.org/1999/xhtml " >
03 < head >
04 <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
05 <title>上传文件</title>
06 </ head >
07
08 <body>
09 <script>
10 function CallbackFunction(str){
11 alert( "上传成功" );
12 }
13 </script>
14 <form action= "uploadfile.php" enctype= "multipart/form-data" method= "post" target= "iframeUpload" >
15 <iframe name= "iframeUpload" src= "" width= "350" height= "35" frameborder=0 SCROLLING= "no" style= "display:NONE" ></iframe>
16 <input id = "test_file" name= "test_file" type = "file" >
17 <input value= "上传文件" type = "submit" >
18 </form>
19 </body>
20 </html>
后台上传处理页面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实现无刷新上传文件的简单方法,想要健壮的程序的话需要再细化