www.educity.cn 发布者:HITTOWN 来源:网络转载 发布日期:2014年05月18日
要实现异步上传图片方法有常用的有二种,一种是利用iframe实现,另一种是借助于ajax来实现一般用第三方插件了。
上传图片form提交target到一个隐藏的iframe里,
代码如下 | 复制代码 |
form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe"> |
然后后台处理完上传图片逻辑后返回给前台,利用ajax修改当前页面DOM对象实现无刷新上传图片的友好功能。
实例
代码如下 | 复制代码 |
a.html <form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST"> <iframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe> |
PHP代码:
代码如下 | 复制代码 |
<?php if ($_FILES["test_file"]["error"] > 0) { echo "Error: " . $_FILES["test_file"]["error"] . "<br />"; } else { //这里的判断图片属性的方法就不写了。自己扩展一下。 $filetype=strrchr($_FILES["test_file"]["name"],"."); $filetype=substr($filetype,1,strlen($filetype)); $filename="img/".time("YmdHis").".".$filetype; move_uploaded_file($_FILES["test_file"]["tmp_name"],$filename); echo '<script >alert(1)</script>'; $return="parent.document.getElementByIdx_x('mpic".$pageset_id."').innerHTML='".$dataimgpath."'"; echo "<script >alert('上传成功')</script>"; echo "<script>{$return}</script>"; } ?> |
其实jquery ajax图片异步上传
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"1/DTD/xhtml1-transitional.dtd">
<html xmlns="" lang="en_US" xml:lang="en_US">
<head>
<title>图片异步上传</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
<body>
<div class="frm">
<form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upfile">
</form>
<iframe src="" width="0" height="0" style="display:none;" name="tarframe"></iframe>
</div>
<div id="msg">
</div>
</body>
</html>
index.js
$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="<img src='upload/p_w_picpaths/"+str+"'>";
$("#msg").append(im);
}
upload.php
<?php
$file=$_FILES['upfile'];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file['tmp_name'],"upload/p_w_picpaths/".$name);
//调用iframe父窗口的js 函数
echo "<script>parent.stopSend('$name')</script>";
?>
转载于:https://blog.51cto.com/phpervip/1872867