近期做有关上传图片的项目，发现都没有使用无刷新页面上传方式，都是通过传统的上传图片跳转然后显示图片，这对于上传多张图片就太不适用！
网上也有各种异步上传的插件 如 swfupload等比较庞大的插件，利用flash上传，顺带介绍一个比较简洁的ajax上传图片的插件ajaxFileUpload：
直接上地址：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html
现在普通上传方式上改造一下，实现无刷新上传
通过隐藏iframe，提交以后不跳转新页面上传（注意红色部分）
1）给form 设置一个 target 属性，提交的 时候会跳转到该地址
2）设置一个隐藏的iframe (注意名字和ID），上传地址输出的内容就会出现在iframe里面，在获取iframe里面的返回值（如图片地址）
上传页面部分代码：
<form action="upload.php" method="post" enctype="multipart/form-data" target="frshowpic" id="myForm">
<table >
<tr>
<td></td>
<td><input type="file" name="avatar" accept="image/*"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="上传图片"></td>
</tr>
</table>
</form>
<div id="img">这里显示图片</div>
<!--影藏iframe-->
<iframe id="frshowpic" name="frshowpic" ></iframe>
<script type="text/javascript">
//用来显示返回结果，隐藏的iframe里面要调用这个显示图片的函数
function showpic(msg,status){
if(status=="ok"){
document.getElementById("myForm").reset();
document.getElementById("img").innerHTML = '<img src="avatar/org_'+msg+'" width="100">';
}else{
alert(msg);
}
}
</script>
3）上传图片php地址：
返回上传的图片地址以及状态
exit("<script>window.parent.showpic('".$newfile."','ok')</script>");//生成图片成功，这个内容是输出到了隐藏的iframe里面
upload.php
<?php
$savepath = 'avatar/';//上传目录
$files = array_keys($_FILES);
$fiedname = $files[0];
if ((($_FILES[$fiedname]["type"] == "image/gif")|| ($_FILES[$fiedname]["type"] == "image/jpg")|| ($_FILES[$fiedname]["type"] == "image/bmp")|| ($_FILES[$fiedname]["type"] == "image/jpeg")|| ($_FILES[$fiedname]["type"] == "image/pjpeg")||($_FILES[$fiedname]["type"] == "image/png")||($_FILES[$fiedname]["type"] == "image/x-png"))){//3M
if($_FILES[$fiedname]["size"] < 1048576*3){
$extend = explode(".",$_FILES[$fiedname]["name"]);
$key = count($extend)-1;
$imgtype = ".".$extend[$key];
$newfilename = uniqid().date("Ymdhis").time();
$newfile = $newfilename.$imgtype;
if(!is_dir($savepath)) {
mkdir($savepath,0777,true);
}
$orgin_image_location = $savepath."org_".$newfile;//原图
//上传大图
$pic = move_uploaded_file($_FILES[$fiedname]["tmp_name"],$orgin_image_location);
chmod($orgin_image_location, 0777);
@unlink($_FILES[$fiedname]["tmp_name"]);
if(file_exists($orgin_image_location)){
exit("<script>window.parent.showpic('".$newfile."','ok')</script>");//生成图片成功
}else{
exit("<script>window.parent.showpic('上传失败','error4')</script>");
}
}else{
exit("<script>window.parent.showpic('图片太大','error2')</script>");
}
}else {
exit("<script>window.parent.showpic('图片类型不正确','error1')</script>");
}
?>
by cxr
