我們?cè)诒疚闹杏玫揭粋€(gè)Ajax表單提交插件:jqery.form.js,有高人修改了幾行代碼并改名為:jquery.wallform.js,直接拿來用.

我們?cè)陧?yè)面上放置一個(gè)form表單,使用post提交到后臺(tái)php處理程序upload.php,注意enctype屬性設(shè)置要支持文件上傳,#preview用來顯示上傳完畢后的圖片,關(guān)于css樣式設(shè)置本文不加說明,請(qǐng)參照下載包的源碼,代碼如下:

1. <form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">  
2.     <div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>  
3.     <div id="up_btn" class="btn">  
4.         <span>添加圖片</span>  
5.         <input id="photoimg" type="file" name="photoimg">  
6.     </div>  
7. </form>  
8. <p>最大100KB，支持jpg，gif，png格式。</p>
9. <div id="preview"></div>  

jQuery:本實(shí)例基于jQuery,因此必須在頁(yè)面中載入jquery庫(kù)以及jquery.wallform.js.

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.wallform.js"></script>

當(dāng)點(diǎn)擊按鈕“添加圖片”后,彈出選擇文件對(duì)話框,選擇要上傳的圖片后,觸發(fā)change事件,然后表單#imageform調(diào)用jquery.wallform.js的ajaxForm()方法,將表單數(shù)據(jù)提交給后臺(tái)PHP處理，并根據(jù)返回結(jié)果處理頁(yè)面元素的展示,如果上傳成功,圖片會(huì)一張張排列顯示在頁(yè)面上,代碼如下:

1. $(function(){  
2.     $('#photoimg').die('click').live('change', function(){  
3.         var status = $("#up_status");  
4.         var btn = $("#up_btn");  
5.         $("#imageform").ajaxForm({  
6.             target: '#preview',   
7.             beforeSubmit:function(){  
8.                 status.show();  
9.                 btn.hide();  
10.             },   
11.             success:function(){  
12.                 status.hide();  
13.                 btn.show();  
14.             },   
15.             error:function(){  
16.                 status.hide();  
17.                 btn.show();  
18.         } }).submit();  
19.     });  
20. });  

PHP:upload.php處理圖片上傳,并將上傳好的圖片保存在uploads/目錄,注意該目錄要有寫權(quán)限,首先需要檢測(cè)是否為POST方式提交,然后判斷圖片格式、圖片大小是否符合要求,然后使用move_uploaded_file()上傳圖片,并將圖片重命名,格式為：time().rand(100,999),代碼如下:

1. $path = "uploads/";  
2.  
3. $extArr = array("jpg", "png", "gif");  
4.  
5. if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){  
6.     $name = $_FILES['photoimg']['name'];  
7.     $size = $_FILES['photoimg']['size'];  
8.       
9.     if(emptyempty($name)){  
10.         echo '請(qǐng)選擇要上傳的圖片';  
11.         exit;  
12.     }  
13.     $ext = extend($name);  
14.     if(!in_array($ext,$extArr)){  
15.         echo '圖片格式錯(cuò)誤！';  
16.         exit;  
17.     }  
18.     if($size>(100*1024)){  
19.         echo '圖片大小不能超過100KB';  
20.         exit;  //開源軟件:Vevb.com 
21.     }  
22.     $image_name = time().rand(100,999).".".$ext;  
23.     $tmp = $_FILES['photoimg']['tmp_name'];  
24.     if(move_uploaded_file($tmp, $path.$image_name)){  
25.         echo '<img src="'.$path.$image_name.'"  class="preview">';  
26.     }else{  
27.         echo '上傳出錯(cuò)了！';  
28.     }  
29.     exit;  
30. }  
31.  
32. //獲取文件類型后綴  
33. function extend($file_name){  
34.     $extend = pathinfo($file_name);  
35.     $extend = strtolower($extend["extension"]);  
36.     return $extend;  
37. } 

當(dāng)然,實(shí)際應(yīng)用中,可以與數(shù)據(jù)庫(kù)以及用戶中心結(jié)合,將用戶上傳的圖片保存在數(shù)據(jù)表中,具體應(yīng)用大家可以自行研究.