我們在本文中用到一個Ajax表單提交插件:jqery.form.js,有高人修改了幾行代碼并改名為:jquery.wallform.js,直接拿來用.

我們在頁面上放置一個form表單,使用post提交到后臺php處理程序upload.php,注意enctype屬性設置要支持文件上傳,#preview用來顯示上傳完畢后的圖片,關于css樣式設置本文不加說明,請參照下載包的源碼,代碼如下:

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:本實例基于jQuery,因此必須在頁面中載入jquery庫以及jquery.wallform.js.

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

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

當點擊按鈕“添加圖片”后,彈出選擇文件對話框,選擇要上傳的圖片后,觸發change事件,然后表單#imageform調用jquery.wallform.js的ajaxForm()方法,將表單數據提交給后臺PHP處理，并根據返回結果處理頁面元素的展示,如果上傳成功,圖片會一張張排列顯示在頁面上,代碼如下:

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/目錄,注意該目錄要有寫權限,首先需要檢測是否為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 '請選擇要上傳的圖片';  
11.         exit;  
12.     }  
13.     $ext = extend($name);  
14.     if(!in_array($ext,$extArr)){  
15.         echo '圖片格式錯誤！';  
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 '上傳出錯了！';  
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. } 

當然,實際應用中,可以與數據庫以及用戶中心結合,將用戶上傳的圖片保存在數據表中,具體應用大家可以自行研究.