iframe实现无刷新上传文件并在当前页面返回数据php处理方式

iframe框架无刷新上传文件的原理

from表单提交数据到到iframe框架，通过无刷新后代处理数据上传文件

在后台处理页面通过js的window.parent获取父页面，在父页面中输出上传文件获得的数据

index.php页面的代码

<meta charset="utf-8">
<iframe name="upload" style="display:none" src=""></iframe>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload">
<input type="hidden" name="filetype" value="img">
<input type="file" name="img">
<input type="hidden" name="MAX_FILE_SIZE" value="102400">
<input type="submit" value="上传">
</form>
<input type="text" id="thumb" value="">

这里需要注意的是iframe中的name="upload"一定要与from中的target="upload的值相等"

这里相当于iframe包含了一个upload.php的页面
所以index.php是父页面

upload.php的页面代码

<?php
//文件上传类，上传文件大小一字节KB为单位注意填写大小，上传的路径请填写绝对地址路径
//上传成功返回文件的路径
class uploads{
public $maxsize;//上传文件在最大值
public $filetype;//允许上传的文件类型
public $savename;//保存的文件名
public $filepath;//文件保存的路径
public $error;//错误信息
public $ext;//上传文件的扩展名
/**
构造方法设置上传配置
*/
function __construct($maxsize,$filetype,$savename,$filepath){
$this->maxsize=$maxsize;
$this->filetype=$filetype;
$this->savename=$savename;
$this->filepath=$filepath;
}
/**
$filearr文件上传数组$_FILES['name']
$savename 文件保存的文件名称
$maxsize 允许文件上传的最大大小
$fieltype 允许上传文件的类型
$filepath 文件上传的路径
*/
public function upload($filearr){
if($this->check_type($filearr)==false) return $this->error;
$this->get_exe($filearr);
if($this->check_ext()==false) return $this->error;
$this->savename();
if(($paths=$this->createdir())==false) return '目录创建失败，请检查文件权限';
if(move_uploaded_file($filearr['tmp_name'],$paths.'/'.$this->savename.'.'.$this->ext)){
//$this->error='文件上传成功';
//return $paths.'/'.$this->savename.'.'.$this->ext;
return '/'.$this->savename.'.'.$this->ext;
}else{
$this->error='文件上传失败';
return $this->error;
}

}
//检查文件大小和错误和允许上传的文件类型
public function check_type($filearr){
$a=$filearr['error'];
$data=array(0=>'无错误，上传成功',1=>'上传文件的大小超过了服务器的最大配置',2=>'上传的值超过了表单中允许的最大值',3=>'文件没有被全部上传',4=>'没有文件被上传',6=>'找不到临时文件目录',7=>'文件写入失败');
if($a!=0){
$this->error=$data[$a];
return false;
}
$size=$filearr['size']/1024;
if($size>$this->maxsize){
$this->error='文件上传大小超过系统限制';
return false;
}
return true;
}
//按照日期创建目录
public function createdir(){
$path=$this->filepath.'/'.date('Ymd',time());
if(!is_dir($path)){
mkdir($path,0777,true)?$path:false;
}
return $path;

}
//获取文件的扩展名
public function get_exe($filearr){
$ext = explode(".", $filearr['name']);
$ext = $ext[count($ext) - 1];
$this->ext=$ext;
}
//检测上传文件的扩展名
public function check_ext(){
$arr=explode('|', $this->filetype);
if(!in_array($this->ext, $arr)){
$this->error='不允许该类文件上传';
return false;
}else{
return true;
}
}
//文件上传的保存文件名,文件名不存在设置按日期随机名称
public function savename(){
if($this->savename==''){
$name=date('mdHi').rand(100,10000);
$this->savename=$name;
}else{
return true;
}

}
//删除文件
public function delupload($file){
if(!@unlink($file))
{
$this->errno = 3;
return false;
}
return true;
}
}

//以上是文件上传的类，成功则返回保存的文件名和文件后缀名

$kk=dirname(__FILE__);
$a=new uploads(1000000000,'jpg|png|gif|zip|rar','',$kk);
if(isset($_FILES['img'])){
$qw=$a->upload($_FILES['img']);
}
$qw='http://192.168.1.122/test/if/'.date('Ymd',time()).$qw;
?>
//这里的js代码是处理数据输出到上传的页面
<script src="./jquery.js"></script>
<script>
var p=window.parent;//获取父页面，即时index.php页面
var filetype='<?php echo $_POST['filetype'];?>';
//如果是上传图片，就将上传图片的地址输出到父页面的input框中
switch(filetype){
case "img":
var thumb=$(p.document.getElementById("thumb"));
thumb.val("<?php if(isset($qw)) echo $qw;?>");
break;
}
</script>

效果图，点击上传后的效果