近期做有关上传图片的项目,发现都没有使用无刷新页面上传方式,都是通过传统的上传图片跳转然后显示图片,这对于上传多张图片就太不适用!

网上也有各种异步上传的插件 如 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="p_w_picpath/*"></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"] == "p_w_picpath/gif")|| ($_FILES[$fiedname]["type"] == "p_w_picpath/jpg")|| ($_FILES[$fiedname]["type"] == "p_w_picpath/bmp")|| ($_FILES[$fiedname]["type"] == "p_w_picpath/jpeg")|| ($_FILES[$fiedname]["type"] == "p_w_picpath/pjpeg")||($_FILES[$fiedname]["type"] == "p_w_picpath/png")||($_FILES[$fiedname]["type"] == "p_w_picpath/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_p_w_picpath_location = $savepath."org_".$newfile;//原图

//上传大图

$pic = move_uploaded_file($_FILES[$fiedname]["tmp_name"],$orgin_p_w_picpath_location);

chmod($orgin_p_w_picpath_location, 0777);

@unlink($_FILES[$fiedname]["tmp_name"]);

if(file_exists($orgin_p_w_picpath_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



同步博文:http://www.cnblogs.com/newbalanceteam/p/4849859.html