要实现异步上传图片方法有常用的有二种,一种是利用iframe实现,另一种是借助于ajax来实现一般用第三方插件了,上传图片form提交target到一个隐藏的iframe里,代码如下 :
-
form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe">
-
-
</form>
-
<iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>
然后后台处理完上传图片逻辑后返回给前台,利用ajax修改当前页面DOM对象实现无刷新上传图片的友好功能,实例代码如下:a.html
-
<form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST">
-
<input name="submit" id="submit" value="" type="hidden">
-
<label>上传文件: <input name="test_file" type="file" id="test_file" size="48"></label>
-
<input type="image" value="立即上传" id="submit_btn">
-
</form>
-
-
<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"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
<html xmlns="http://www.w3.org/1999/xhtml" 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/images/"+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/images/".$name);
-
-
-
-
echo "<script>parent.stopSend('$name')</script>";
-
?>
-
(责任编辑:最模板) |