用freemarker做一個完美的圖片上傳組件

一個項目中，肯定是需要圖片上傳功能，但是總不可能每個需要上傳圖片的地方都寫一套js邏輯，寫一套獲取上傳後的圖片路徑方法，因此我們需要將其抽取成一個ftl，需要上傳的地方包含進來即可。如下效果：

然後點擊上傳完後：

並且很方便的獲取上傳圖片的url或者圖片ID。

上面就是需求啦，現在我們來分析下，要實現這種效果需要考慮的問題是啥？

1、樣式問題

首先，我們知道，文件上傳用的是input標籤，但是我們的input標籤樣式很詭異，如下：

真是醜暈了，並且像我這種css很弱的，感覺怎麼調都有問題，所以這是第一個問題，當然對於大神來說，這個是小case啦。

解決方法：用相對定位然後讓input的透明度為0，也就是全透明。

2、如何獲取上傳後的圖片問題

如果我們一個頁面只有一個地方需要上傳，那麼當然很簡單啦，指定上傳主鍵裡的id即可，然後用戶使用的時候就直接根據id即可，但是假如一個頁面有好多個圖片要上傳，那麼我們怎麼獲取上傳後圖片的鏈接呢，怎麼去區分？

解決方法：讓用戶傳過控件ID到組件中，然後組件內部根據用戶傳過來的ID生產保存上傳後返回的鏈接的input.

<code>/<code>

然後用戶上傳完圖片就直接更具自己定義的ID來獲取值啦。

3、代碼實例

<code>



    
    
/<code>

上面最重要的是${id}，這個id不僅把每個組件區分獨立開來了，而且方法也獨立開來了，不會互相混亂衝突，完全是屬於控件自己。

<code>function uploadFile${id}() {
}/<code>

然後我們怎麼使用該組件呢，代碼如下：

<code>

第一張圖片：




第二張圖片：


/<code>

這樣就可以了，跟博文開頭的樣式一樣。用戶上傳完圖片後想要獲取上傳的值就直接：

<code>var img1 = $("#first").val();
var img2 = $("#second").val();/<code>

這樣就打工告成啦。

備註：上面的上傳圖片的ajax方法只是我這邊的實現方法，每個用戶都有自己的實現，主要關注樣式和js實現以及怎麼傳id即可。

閱讀更多 Java全棧 的文章

關鍵字: CSS 圖片 上傳