下面我們一起來看一個php+jquery Ajax異步上傳圖片(ajaxSubmit)實例,這個我們真正的利用了ajax而不是使用iframe之類的哦。
效果如下
代碼如下 復制代碼
index.php文件
php結合jquery異步上傳圖片(ajaxSubmit),以下為提交頁面代碼:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax異步上傳圖片</title>
<script src="js/jquery-1.4.2.js" language="JavaScript" type="text/javascript"></script>
<script src="js/jquery.form.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
function sky_upfiles(){
var messtxt;
$("#sky_upform").ajaxSubmit({
//dataType:'script',
type:'post',
url: "doupfiles.php",
beforeSubmit: function(){
$("#sky_txt").html("圖片上傳中...");
},
success: function(data){
if(data=="1"){
messtxt = "上傳成功!";
}else if(data=="-1"){
messtxt = "文件超過規定大小!";
}else if(data=="-2"){
messtxt = "文件類型不符!";
}else if(data=="-3"){
messtxt = "移動文件出錯!";
}else{
messtxt = "未知錯誤!";
}
$("#sky_txt").html(messtxt);
//$("#sky_txt").append(data);
},
resetForm: false,
clearForm: false
});
//$("#upimgform").submit();
}
</script>
</head>
<body>
<br />
<fieldset style="width:97%">
<legend>上傳文件</legend>
<form enctype="multipart/form-data" id="sky_upform" name="sky_upform" action="" method="post">
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td width="100" align="right" class="f-12"></td>
<td class="f-12" align="left">
<input name="upfile" id="upfile" maxlength="20" size="40" type="file" value="" /><input name="upmit" type="button" id="upmit" value="上傳" onclick="sky_upfiles()"/>
<font color="red" id="sky_txt"></font></td>
</tr>
</form>
</body>
</html>
doupfiles.php文件
代碼如下 復制代碼<?php
/*
* 1:成功上傳
*-1:文件超過規定大小
*-2:文件類型不符
*-3:移動文件出錯
*/
if(is_uploaded_file($_FILES['upfile']['tmp_name'])){
$photo_types=array('image/jpg', 'image/jpeg','image/png','image/pjpeg','image/gif','image/bmp','image/x-png');//定義上傳格式
$max_size=700000; //上傳照片大小限制,默認700k
$photo_folder="upload/".date("Y")."/".date("m")."/".date("d")."/"; //上傳照片路徑
///////////////////////////////////////////////////開始處理上傳
if(!file_exists($photo_folder))//檢查照片目錄是否存在
{
mkdir($photo_folder, 0777, true); //mkdir("temp/sub, 0777, true);
}
$upfile=$_FILES['upfile'];
$name=$upfile['name'];
$type=$upfile['type'];
$size=$upfile['size'];
$tmp_name=$upfile['tmp_name'];
$file = $_FILES["upfile"];
$photo_name=$file["tmp_name"];
//echo $photo_name;
$photo_size = getimagesize($photo_name);
if($max_size < $file["size"])//檢查文件大小
echo "-1"; //echo "<script>alert('對不起,文件超過規定大小!');history.go(-1);</script>";
if(!in_array($file["type"], $photo_types))//檢查文件類型
echo "-2"; //echo "<script>alert('對不起,文件類型不符!');history.go(-1);</script>";
if(!file_exists($photo_folder))//照片目錄
mkdir($photo_folder);
$pinfo=pathinfo($file["name"]);
$photo_type=$pinfo['extension'];//上傳文件擴展名
$photo_server_folder = $photo_folder.time().".".$photo_type;//以當前時間和7位隨機數作為文件名,這裡是上傳的完整路徑
if(!move_uploaded_file ($photo_name, $photo_server_folder))
{
echo "-3"; //echo "移動文件出錯";
exit;
}
$pinfo=pathinfo($photo_server_folder);
$fname=$pinfo['basename'];
echo "1"; //echo " 已經成功上傳:".$photo_server_folder."<br />";
}
?>
最後把完整的php+jquery Ajax異步上傳圖片(ajaxSubmit)實例源碼下載地址