這是利用ajaxupload組件實現上傳圖片的功能，我稍微增強了一些效果，直接上截圖：
這是起始頁面
選擇圖片
正在上傳的狀態
上傳後
再上傳一次
由於我做了上傳的限制，所以只能上傳兩張照片
點擊刪除按鈕，試一下
刪除後的狀態，將選中的照片刪除，並且解除上傳限制
這就是大致的效果了，還不錯吧，哈哈
接下來簡要介紹下我的設計：
1、利用ajaxupload組件上傳；
2、後臺將組件上傳的臨時文件轉存到自己喜歡的目錄（我是存放到tomcat/webapps對應的項目下的）
3、根據組件返回前臺的參數顯示圖片，並且將路徑保存；
代碼就不貼出來了，大家有興趣的話，可以到這裏下載完整的工程http://download.csdn.net/detail/abauch_d/5339395
以下是網上的一些關於該組件api的資料：
new AjaxUpload(‘#upload_button_id’, {
// 服務器端上傳腳本
// 注意: 文件不允許上傳到另外一個域上
action: ‘upload.php’,
// 文件上傳的名字
name: ‘userfile’,
// 發送的附加數據
data: {
example_key1 : ‘example_value’,
example_key2 : ‘example_value2′
},
// 篩選後提交文件
autoSubmit: true,
// 您希望從服務器返回的數據類型
// HTML (text) 和 XML 自動檢測
// 當您使用JSON作爲響應時很實用，在這種情況下就設置爲 “json”
// 也要設置服務器端的響應類型爲text/html, 否則在IE6下是不工作的
responseType: false,
// 文件選擇後使用
// 當autoSubmit爲disabled時很管用
// 您可以通過返回false取消上傳
// @參數file爲上傳文件的文件名
// @參數extension爲那個文件（後綴名）
onChange: function(file, extension){},
// 文件上傳時調用
// 您可以通過設置返回false 取消上傳
// @參數file爲上傳文件的文件名
// @參數extension爲那個文件（後綴名）
onSubmit: function(file, extension) {},
// 當文件上傳完成的時候調用
// 警告！不要使用”false”字符串作爲服務器的響應
// @參數file 指上傳的文件名
// @參數 response 指服務器的響應
onComplete: function(file, response) {}
});
ps：我發現一個問題，當我要在頁面用兩個上傳按鈕的時候，這個代碼就必須要兩份，想共用一份代碼，就弄不來，會出亂七八糟的問題，如果有實現的了的，歡迎來搞！