欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

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

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

一个最原始最简单的iframe上传例子:

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


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

代码如下 复制代码

上传文件







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

代码如下 复制代码

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 "";
}
?>

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


例2

PHP利用iframe上传文件并返回值到父框架

淡水其实也是采用这样的做发法的。正好看到有童鞋博客上有这样写。就顺手贴过来了。

代码如下 复制代码

if($result)
{
echo "上传成功!文件路径为:".$file2;
echo '';
echo'';
}

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

代码如下 复制代码


});

function InsertHtml(type,path){

type=type.toLowerCase()

switch(type){
case '.gif':
thecode = 'iframe无刷新文件上传实现程序';
break;
case '.jpg':
thecode = 'iframe无刷新文件上传实现程序';
break;
//......略过部分......
default :
thecode = 'Download';
break;
}
tinyMCE.execCommand('mceInsertContent',true,thecode);
}

iframe也就是在这个页面里了。
在我的iframe的提交给的php处理里:

代码如下 复制代码

$pasteJS = "n";
echo $pasteJS;

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