manager程序廣告管理
我們的衆籌項目是由兩個子系統組成的，管理員使用的manager系統和會員使用的衆籌系統。在前面的文章中我們基本上已經將manager程序中的正刪改查功能都介紹完啦!今天本來打算開始實行前臺會員使用的衆籌系統，可是打開衆籌系統首頁的原型頁面時想到，首頁展示的3個廣告哪裏來的？？？
靠！當然應該是管理人員在後臺系統上傳配置出來的！那麼文件上傳在manager程序中我們還需要來實現一下吧。
首先修改廣告管理菜單，發送獲取廣告管理數據請求，並跳轉到廣告列表頁面。
爲廣告管理菜單添加請求。
在controller中添加處理方法，方法很簡單，直接返回廣告列表顯示頁面advertisement.jsp。所有的處理請求我們都是在頁面中使用ajax完成的。
在頁面剛加載完成的時候發送ajax請求獲取廣告列表，發送請求時附帶分頁信息（fn）。
在ajax的成功回調中將返回的廣告列表數據顯示到頁面上，並更新下邊的頁碼和分頁按鈕。
在controller中使用分頁插件pagehelp處理髮送的ajax /manager/advertisment/json請求。
service層也很簡單，直接獲取所有數據就可以啦！（因爲我們使用了分頁插件，獲取到所有的廣告數據後只需要傳入頁碼就可以獲取相應頁數的數據啦）
上邊有兩個地方需要注意一下。在創建分頁按鈕時，分頁按鈕當中有一個末頁按鈕可以獲取到最後一頁的廣告數據。那麼我們如何知道廣告的最後一頁是多少頁呢？查來查去的太麻煩！這裏有一個簡單的方法！開啓mybatis分頁插件的分頁合理化功能。這樣的話我們在獲取某一頁廣告數據時，將頁數pn傳一個最大值9999就可以啦！
如何開啓mybatis分頁插件的分頁合理化功能呢？我們還需要去mybatis配置文件中配置。那麼mybatis的配置文件在哪裏呢？mybatis的配置文件在dao中。
另一個需要注意的地方就是，這裏我們又使用了一個新的插件layer-v3.0.3。layer這個插件是專門用於彈出層的顯示件。使用非常簡單。將文件夾添加到項目再加載其中的js就可以啦。
這樣我們在數據庫中造一些假數據，然後去頁面看看效果吧。
接下來添加廣告的添加功能，點擊新增按鈕，彈出模態框來編輯廣告信息，併發送上傳的ajax請求。
爲新增按鈕綁定一個方法，點擊新增後顯示新增模態框。
這裏的模態框中，雖然在form表單中添加了請求地址，但我們卻沒有使用。我們這裏不使用form表單提交數據（上傳文件）。我們使用一個新的技術----ajax來上傳文件。
爲模態框中的確定按鈕綁定方法。點擊按鈕後在這個方法中獲取這個模態框中的數據，並使用ajax發送上傳廣告信息的請求。
這裏需要注意的是，ajax默認是會將請求的參數做一些編碼處理的，那我們想要上傳的廣告圖片文件也是請求參數，如果在發送請求的過程中被ajax修改了的話不就上傳不了了嗎？，那我們如何上傳呢？？？所以我們來設置兩個參數來實現讓ajax不出來請求參數，從而完成文件上傳的功能。
在controller中處理文件上傳請求。
我們在項目中創建一個用於保存上傳文件的文件夾/advertisments。在接收的時候將MultipartFile file多部件文件數據file保存到/advertisments文件夾中即可。
service端的處理也很簡單，就是調用dao層將上傳的多部件廣告信息插入到數據庫中。
注意！！！
想要使用上邊的多部件文件上傳功能，我們還需要一些配置。
1，添加Commons-fileupload依賴。
2，在spring-mvc的配置文件中添加文件上傳解析器multipartResolver。
這樣我們提交的廣告圖片就可以上傳到服務器啦！不過在我們選中某張圖片的時候還想在新增的模態框中預覽一下這張圖片。
那我們就爲模態框中可以選中文件的input綁定一個change事件。只要有變化就會觸發這個事件，那我們就可以在模態框中下邊的空白區域div中展示圖片啦。
這樣我們的圖片上傳就完美的完成啦！
看看效果吧！
來到廣告管理頁面展示廣告列表，點擊新增按鈕彈出添加廣告模態框。
在添加廣告模態框中編輯廣告名稱，添加廣告圖片後，下方會顯示預覽選中後的圖片，並點擊確定，上傳。。
上傳完成，刷新廣告列表，自動跳轉到最後一頁。
ok，圖片上傳這個功能也這麼和諧的完成啦。
接下來呢！我們再來實現一個每個廣告圖片的預覽功能，還記得我們在顯示廣告列表的時候，在每一列廣告後邊都插入了三個按鈕，分別是預覽、編輯、刪除。編輯和刪除這兩個功能沒啥說的很簡單！那麼預覽呢？上邊新增的時候我們在模態框中實現了一個圖片的預覽，這裏我們就使用layer作爲彈出框來顯示預覽的圖片吧！
方法也很簡單爲廣告列表中的每一條廣告後的預覽按鈕都要綁定點擊事件，在事件中創建layer並顯示圖片。由於廣告列表中的廣告數據是後添加的，所以普通的查找元素在綁定方法肯定是不行的，這裏使用on事件委託機制來監聽事件。使用方法就是找到我們想要監聽的所有元素的父元素（再上層一點也沒關係，能確定具體元素就好），在父元素上使用on（參數1，參數2，參數3）方法，參數1是我們想要監聽的事件（比如"click"，可以是一個也可以是多個），參數2是我們要在父元素中監聽的某一個具體子元素（比如".showimg"是想監聽class爲showimg的子元素），參數3就是我們監聽到某一元素觸發某一事件後的處理方法啦！
屬性url是我們事先在爲廣告列表添加每一條廣告後邊按鈕時添加到預覽按鈕當中的屬性。
感受一下我們的成果吧！
彈框比較醜！還有待提高呵呵。。
使用ajax發送數據
之前我們就使用過ajax來發送數據啦，現在我們來整理一下使用ajax發送from數據的相關知識吧！
form數據一般有兩種類型；一直是普通form數據，另一種是多部件表單數據（也就是文件項）。他們的在於form表單中的
enctype屬性不同。普通表單enctype屬性的默認值是"application/x-www-form-urlencoded"。多部件表單enctype屬性的值就必須是"multipart/form-data"啦！
剛纔我們說的form表單數據類型在原生的表單提交時，纔會使用到。那麼我們要是使用ajax來提交表單中的數據也想達到同樣的效果該如何操作呢？那就要使用ajax中的processData參數和contentType參數啦！他們的參數默認都是true，在發送普通數據時ajax會對我們傳入的參數進行編碼處理。如果我們想要發送多部件數據時，那我們的數據就不應該被處理（不應該被修改），所以這兩個參數都應該改成false。
1）、普通表單（input） enctype="application/x-www-form-urlencoded"
<form action="${ctp }/servicectrl/ads/upload" id="ad_form" method="post" >
<input type="text" class="form-control" id="ad_name_input" name="name" />
<input type="text" class="form-control" id="ad_name2_input" name="user" />
<input type="text" class="form-control" id="ad_name3_input" name="pwd" />
"${ctp }/servicectrl/ads/upload",
{name:$("#ad_name_input ").val(),user:$("#ad_name2_input ").val(),pwd:$("#ad_name3_input ").val() },
"${ctp }/servicectrl/ads/upload",
{name:$("#ad_name_input ").val(),user:$("#ad_name2_input ").val(),pwd:$("#ad_name3_input ").val() },
url:"${ctp }/servicectrl/ads/upload ",
data:"name=1&pwd=2&user=3",//需要傳遞的數據（兩種寫法：1：name=1&pwd=2&user=3 ）
//2：js對象：{name:“zhangsan”,user:"李四",pwd:"abc" },還是會轉爲k=v&k=v的形式
//原生表單想要提交所有數據；快速獲取到所有數據的k=v&k=v放在提交的數據上
alert($("form:first").serialize());
2）、多部件表單（文件項） enctype="multipart/form-data"
{user:$("#ad_name3_input ").val()}
url:"${ctp }/servicectrl/ads/upload",
data:new FormData($("#ad_form")[0]),
processData:false,//告訴ajax不要處理和編碼這些數據，直接提交
contentType:false,//不使用默認的內容類型
//文件上傳表單；一次提交所有項，快捷方式使用formData包裝： new FormData($("#form01")[0])
//FormData()：自定義內容；使用append添加自定義的項
fd.append("name",$("#ad_name_input").val());
fd.append("ad",$("#ad_file_input")[0].files[0])；
$(選出文件項_file_input)[0].files[0]:
最後再將我寫的例子程序放在這裏，以供需要時查詢和回顧：