Iframe 无刷新上传文件

1、【html 代码，主体是iframe与from表单的代码】

<span style="margin-bottom:10px;"><a href="#" onclick="showdiv();" title="iframe无刷新上传" class="shortcut">[修改头像]</a></span>

<div id="bg"></div>

<div id="show">

<div style="height:25px;line-height:25px;background-color:#EAEAEA;"><span style="margin-left:5px">【上传】</span><span style="float:right;"><a href="javascript:void(0);"onclick="hidediv();">【X】</a></span></div>

 

<div style="margin-top:10px;">

<iframe style="display:none" name="ifm"></iframe>

<form action="/Index/uploadFiles" target="ifm" method="post"enctype="multipart/form-data">

上传文件：<input type="file"name="headpic" id="headpic"/>&nbsp;&nbsp;<input type="submit" name="sub"value="上传" />

</form>

</div>

</div>

注：from表单中的target属性是必须的，属性名称与iframe中的name属性名称须一致。

这是在一个遮罩层里的，遮罩层代码由css样式与js控制完成，如下：

Css代码：

<style type="text/css">

#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}

#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}

</style>

Js代码

<script type="text/javascript" type="text/javascript">

//显示遮罩层

function showdiv(){

document.getElementById("bg").style.display ="block";

document.getElementById("show").style.display ="block";

}

//取消遮罩层的显示

function hidediv(){

document.getElementById("bg").style.display ='none';

document.getElementById("show").style.display ='none';

}

//上传成功后调用

function callback(file_name){

//设置刚上传的图片路径

document.getElementById("headers").setAttribute("src", file_name);

hidediv ();

}

 

</script>

 

服务器处理上传代码（PHP语言）：

if($_FILES['headpic']['error'] > 0){

echo "<script>alert('没有上传图片或图片有误!');</script>";

}else{

$myfile= $_FILES;

$size= 10*1024*1024;

if($myfile['headpic']['size']<=$size){

//判断类型

$fileInfo= pathinfo($myfile['headpic']['name']);

if($fileInfo['extension'] =='jpg' || $fileInfo['extension'] =='png' || $fileInfo['extension'] == 'jpeg'){

$file_path= "./files/";

//$filename =date("YmdHis").mt_rand(100,999).".".$fileInfo['extension'];

$filename= date("Ymd-His"). "." .$fileInfo['extension'];

 

 

//$filename = iconv("UTF-8","GBK",$filename);

$extension= $fileInfo['extension'];

//上传文件的函数

 

if(move_uploaded_file($myfile['headpic']['tmp_name'],$file_path.$filename)){

//处理图片的规格开始

//return array("scanName" =>$filename,"errorMsg" => "success");

//echo $file_path . $filename;

$user= $this->Session->read("userInfo");

$ret= $this->Index->updateHeader($user[0]['xa']['id'], $filename);

if($ret){

echo "<script>parent.callback('/files/". $filename . "');</script>";

}else{

echo "<script>alert('上传失败!');</script>";

}

 

}

}

}

}

 

这样基本上就可以完成iframe无刷新上传了！其实，利用iframe上传实现的无刷新上传，刷新的应该是iframe,在form表单中其实多了一个target属性，其名称与iframe中的name属性一致。如果没有target这个属性的话，就是跳转页面上传（自己的理解）。