Ajax+PHP邊學邊練之五圖片處理

更新時間：2009年12月03日 22:24:34 作者：

在上一篇中講解了如何通過Ajax提交表單并由PHP處理底層數(shù)據(jù)，本篇將主要介紹圖片的上傳與處理。對于文件的上傳很簡單，只需一個Form便可實現(xiàn)，再通過PHP將源文件上傳到目標目錄。

先上個效果圖：

upload
Sample6_1.php 中創(chuàng)建Form：

復制代碼代碼如下:

 
//顯示上傳狀態(tài)和圖片 
<div id="showimg"></div> 
//上傳文件需要定義enctype，為了顯示圖片將target設為uploadframe 
<form id="uploadform" action="process_upload.php" method="post" 
enctype="multipart/form-data" target="uploadframe"> 
Upload a File:<br /> 
<input type="file" id="myfile" name="myfile" /> 
//上傳文件 
<input type="submit" value="Submit" onclick="uploadimg(document.getElementById('uploadform')); return false;" /> 
<iframe id="uploadframe" name="uploadframe" src="process_upload.php" class="noshow"></iframe> 
</form> 

上傳圖片函數(shù) uploadimg：

復制代碼代碼如下:

 
function uploadimg(theform){ 
//提交Form 
theform.submit(); 
//在showimg <div>中顯示上傳狀態(tài) 
setStatus ("Loading...","showimg"); 
} 
//上傳狀態(tài)函數(shù) 
function setStatus (theStatus, theObj){ 
obj = document.getElementById(theObj); 
if (obj){ 
obj.innerHTML = "<div class=\"bold\">" + theStatus + "</div>"; 
} 
} 

process_upload.php 提供文件上傳功能：

復制代碼代碼如下:

 
<?php 
//提供圖片類型校驗 
$allowedtypes = array("image/jpeg","image/pjpeg","image/png", "image/x-png","image/gif"); 
//文件存放目錄 
$savefolder = "images"; 

//如果有文件上傳就開始干活 
if (isset ($_FILES['myfile'])){ 
//檢查上傳文件是否符合$allowedtypes類型 
if (in_array($_FILES['myfile']['type'],$allowedtypes)){ 
if ($_FILES['myfile']['error'] == 0){ 
$thefile = "$savefolder/".$_FILES['myfile']['name']; 
//通過move_uploaded_file上傳文件 
if (!move_uploaded_file($_FILES['myfile']['tmp_name'], $thefile)){ 
echo "There was an error uploading the file."; 
} 
else{ 
?> 
<!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> 
<script type="text/javascript" src="functions.js"></script> 
</head> 
<body> 
<!-- 顯示圖片 --> 
<img src="<?php echo $thefile; ?>" onload="doneloading(parent,'<?php echo $thefile; ?>')" /> 
</body> 
</html> 
<?php 
} 
} 
} 
} 
?> 