windows版nginx+ftp實現圖片服務器的搭建

配置圖片服務器的一部分參數

resource.properties:

 1 #FTP\u76f8\u5173\u914d\u7f6e
 2 #FTP\u7684ip\u5730\u5740
 3 FTP_ADDRESS=192.168.3.27
 4 FTP_PORT=21
 5 FTP_USERNAME=ftpuser
 6 FTP_PASSWORD=ftpuser
 7 FTP_BASE_PATH=/www/images
 8 #\u56fe\u7247\u670d\u52a1\u5668\u7684\u76f8\u5173\u914d\u7f6e
 9 #\u56fe\u7247\u670d\u52a1\u5668\u7684\u57fa\u7840url
10 IMAGE_BASE_URL=http://192.168.3.27:8899/www/images

相關頁面引入kindedtior的js

common.js:

  1 Date.prototype.format = function(format){ 
  2     var o =  { 
  3     "M+" : this.getMonth()+1, //month 
  4     "d+" : this.getDate(), //day 
  5     "h+" : this.getHours(), //hour 
  6     "m+" : this.getMinutes(), //minute 
  7     "s+" : this.getSeconds(), //second 
  8     "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
  9     "S" : this.getMilliseconds() //millisecond 
 10     };
 11     if(/(y+)/.test(format)){ 
 12         format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
 13     }
 14     for(var k in o)  { 
 15         if(new RegExp("("+ k +")").test(format)){ 
 16             format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
 17         } 
 18     } 
 19     return format; 
 20 };
 21 
 22 var TT = TAOTAO = {
 23     // 編輯器參數
 24     kingEditorParams : {
 25         //指定上傳文件參數名稱
 26         filePostName  : "uploadFile",
 27         //指定上傳文件請求的url。
 28         uploadJson : '/YouZhi-BackEng/pic/upload',
 29         //上傳類型，分別爲image、flash、media、file
 30         dir : "image"
 31     },
 32     // 格式化時間
 33     formatDateTime : function(val,row){
 34         var now = new Date(val);
 35         return now.format("yyyy-MM-dd hh:mm:ss");
 36     },
 37     // 格式化鏈接
 38     formatUrl : function(val,row){
 39         if(val){
 40             return "<a href='"+val+"' target='_blank'>查看</a>";            
 41         }
 42         return "";
 43     },
 44  
 45     init : function(data){
 46         // 初始化圖片上傳組件
 47         this.initPicUpload(data);
 48         // 初始化選擇類目組件
 49         this.initItemCat(data);
 50     },
 51     // 初始化圖片上傳組件
 52     initPicUpload : function(data){
 53         $(".picFileUpload").each(function(i,e){   //.picFileUpload
 54             var _ele = $(e);
 55             _ele.siblings("div.pics").remove();
 56             _ele.after('\
 57                 <div class="pics" >\
 58                     \
 59                 </div>');
 60             // 回顯圖片
 61             if(data && data.pics){
 62                 var imgs = data.pics.split(",");
 63                 for(var i in imgs){
 64                     if($.trim(imgs[i]).length > 0){
 65                         _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='120' height='80' /></a></li>");
 66                     }
 67                 }
 68             }
 69             //給「上傳圖片按鈕」綁定click事件
 70             $(e).click(function(){
 71                 var form = $("#adForm");
 72                 //打開圖片上傳窗口
 73                 KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
 74                     var editor = this;
 75                     editor.plugin.multiImageDialog({
 76                         clickFn : function(urlList) {
 77                             var imgArray = [];
 78                             KindEditor.each(urlList, function(i, data) {
 79                                 imgArray.push(data.url);
 80                                 form.find(".pictures").append("<input type='hidden' name='cpicture' value="+data.url+">");
 81                                 form.find(".pics").append("<a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='904' height='336' /></a><br>");
 82                             });
 83                             form.find("[name=image]").val(imgArray.join(","));
 84                             editor.hideDialog();
 85                         }
 86                     });
 87                 });
 88             });
 89         });
 90     },
 91     
 92     
 93     // 初始化選擇類目組件
 94     initItemCat : function(data){
 95         $(".selectItemCat").each(function(i,e){
 96             var _ele = $(e);
 97             if(data && data.cid){
 98                 _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
 99             }else{
100                 _ele.after("<span style='margin-left:10px;'></span>");
101             }
102             _ele.unbind('click').click(function(){
103                 $("<div>").css({padding:"5px"}).html("<ul>")
104                 .window({
105                     width:'500',
106                     height:"450",
107                     modal:true,
108                     closed:true,
109                     iconCls:'icon-save',
110                     title:'選擇類目',
111                     onOpen : function(){
112                         var _win = this;
113                         $("ul",_win).tree({
114                             url:'/item/cat/list',
115                             animate:true,
116                             onClick : function(node){
117                                 if($(this).tree("isLeaf",node.target)){
118                                     // 填寫到cid中
119                                     _ele.parent().find("[name=cid]").val(node.id);
120                                     _ele.next().text(node.text).attr("cid",node.id);
121                                     $(_win).window('close');
122                                     if(data && data.fun){
123                                         data.fun.call(this,node);
124                                     }
125                                 }
126                             }
127                         });
128                     },
129                     onClose : function(){
130                         $(this).window("destroy");
131                     }
132                 }).window('open');
133             });
134         });
135     },
136     
137     createEditor : function(select){
138         return KindEditor.create(select, TT.kingEditorParams);
139     },
140     
141     /**
142      * 建立一個窗口，關閉窗口後銷燬該窗口對象。<br/>
143      * 
144      * 默認：<br/>
145      * width : 80% <br/>
146      * height : 80% <br/>
147      * title : (空字符串) <br/>
148      * 
149      * 參數：<br/>
150      * width : <br/>
151      * height : <br/>
152      * title : <br/>
153      * url : 必填參數 <br/>
154      * onLoad : function 加載完窗口內容後執行<br/>
155      * 
156      * 
157      */
158     createWindow : function(params){
159         $("<div>").css({padding:"5px"}).window({
160             width : params.width?params.width:"80%",
161             height : params.height?params.height:"80%",
162             modal:true,
163             title : params.title?params.title:" ",
164             href : params.url,
165             onClose : function(){
166                 $(this).window("destroy");
167             },
168             onLoad : function(){
169                 if(params.onLoad){
170                     params.onLoad.call(this);
171                 }
172             }
173         }).window("open");
174     },
175     
176     closeCurrentWindow : function(){
177         $(".panel-tool-close").click();
178     },
179     
180     changeItemParam : function(node,formId){
181         $.getJSON("/item/param/query/itemcatid/" + node.id,function(data){
182               if(data.status == 200 && data.data){
183                  $("#"+formId+" .params").show();
184                  var paramData = JSON.parse(data.data.paramData);
185                  var html = "<ul>";
186                  for(var i in paramData){
187                      var pd = paramData[i];
188                      html+="<li><table>";
189                      html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
190                      
191                      for(var j in pd.params){
192                          var ps = pd.params[j];
193                          html+="<tr><td class=\"param\"><span>"+ps+"</span>: </td><td><input autocomplete=\"off\" type=\"text\"/></td></tr>";
194                      }
195                      
196                      html+="</li></table>";
197                  }
198                  html+= "</ul>";
199                  $("#"+formId+" .params td").eq(1).html(html);
200               }else{
201                  $("#"+formId+" .params").hide();
202                  $("#"+formId+" .params td").eq(1).empty();
203               }
204           });
205     },
206     getSelectionsIds : function (select){
207         var list = $(select);
208         var sels = list.datagrid("getSelections");
209         var ids = [];
210         for(var i in sels){
211             ids.push(sels[i].id);
212         }
213         ids = ids.join(",");
214         return ids;
215     },
216     
217     /**
218      * 初始化單圖片上傳組件 <br/>
219      * 選擇器爲：.onePicUpload <br/>
220      * 上傳完成後會設置input內容以及在input後面追加<img> 
221      */
222     initOnePicUpload : function(){
223         $(".onePicUpload").click(function(){
224             var _self = $(this);
225             KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() {
226                 this.plugin.imageDialog({
227                     showRemote : false,
228                     clickFn : function(url, title, width, height, border, align) {
229                         var input = _self.siblings("input");
230                         input.parent().find("img").remove();
231                         input.val(url);
232                         input.after("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>");
233                         this.hideDialog();
234                     }
235                 });
236             });
237         });
238     }
239 };

 

再本身寫一個javascript：

 1 <script type="text/javascript">
 2     var itemAddEditor ;
 3     //頁面初始化完畢後執行此方法
 4     $(function(){
 5         //建立富文本編輯器
 6         itemAddEditor = TAOTAO.createEditor("#adForm [name=desc]");
 7         //itemAddEditor = KindEditor.create("#stepForm [name=desc]", TT.kingEditorParams);
 8         //初始化類目選擇和圖片上傳器
 9         TAOTAO.init({fun:function(node){
10             TAOTAO.changeItemParam(node, "itemAddForm");
11         }});
12     });
13 </script>

在頁面上的from表單中寫入這個代碼，引入上傳組件：

 1 <span class="pictures"></span>
 2                                         <a href="javascript:void(0)"
 3                                         class="easyui-linkbutton picFileUpload">
 4                                         <span><input type="button" value="上傳廣告圖片"></input></span> <br> <br>
 5                                     </a>
 6                                         <input type="submit" class="btn btn-default" value="提交">
 7                                         <div hidden="true">
 8                                             <textarea style="width:800px;height:300px;visibility:hidden;"
 9                                                 name="desc">
10                                             </textarea>
11                             </div>

這個時候咱們就能夠看見頁面上已經引入了一個文件上傳組件

以後去後臺編寫controller和service

PictureController:

 1 package com.youzhiback.controller;
 2 
 3 import java.util.Map;
 4 
 5 import org.springframework.beans.factory.annotation.Autowired;
 6 import org.springframework.stereotype.Controller;
 7 import org.springframework.web.bind.annotation.RequestMapping;
 8 import org.springframework.web.bind.annotation.ResponseBody;
 9 import org.springframework.web.multipart.MultipartFile;
10 
11 import com.youzhiback.service.IPictureService;
12 import com.youzhiback.utils.JsonUtils;
13 
14 @Controller
15 //圖片上傳controller
16 public class PictureController {
17 
18     @Autowired
19     private IPictureService pictureService;
20     
21     @RequestMapping("/pic/upload")
22     @ResponseBody
23     public String pictureUpload(MultipartFile uploadFile) {
24         Map result = pictureService.uploadPicture(uploadFile);
25         //爲了保證功能的兼容性，須要把Result轉換成json格式的字符串。
26         String json = JsonUtils.objectToJson(result);
27         return json;
28     }
29 }

PictureServiceImpl.java:

 1 package com.youzhiback.service.impl;
 2 
 3 import java.io.IOException;
 4 import java.util.HashMap;
 5 import java.util.Map;
 6 import java.util.UUID;
 7 
 8 import org.joda.time.DateTime;
 9 import org.springframework.beans.factory.annotation.Value;
10 import org.springframework.stereotype.Service;
11 import org.springframework.web.multipart.MultipartFile;
12 
13 import com.youzhiback.service.IPictureService;
14 import com.youzhiback.utils.FtpUtil;
15 import com.youzhiback.utils.IDUtils;
16 
17 /**
18  * 圖片上傳服務
19  * <p>Title: PictureServiceImpl</p>
20  * <p>Description: </p>
21  * @version 1.0
22  */
23 @Service
24 public class PictureServiceImpl implements IPictureService {
25     
26     @Value("${FTP_ADDRESS}")
27     private String FTP_ADDRESS;
28     @Value("${FTP_PORT}")
29     private Integer FTP_PORT;
30     @Value("${FTP_USERNAME}")
31     private String FTP_USERNAME;
32     @Value("${FTP_PASSWORD}")
33     private String FTP_PASSWORD;
34     @Value("${FTP_BASE_PATH}")
35     private String FTP_BASE_PATH;
36     @Value("${IMAGE_BASE_URL}")
37     private String IMAGE_BASE_URL;
38 
39     @Override
40     public Map uploadPicture(MultipartFile uploadFile) {
41         Map resultMap = new HashMap();
42         try {
43             //生成一個新的文件名
44             //取原始文件名
45             String oldName = uploadFile.getOriginalFilename();
46             //生成新文件名
47             //UUID.randomUUID();
48             String newName = IDUtils.genImageName();
49             newName = newName + oldName.substring(oldName.lastIndexOf("."));
50             //圖片上傳
51             String imagePath = new DateTime().toString("/yyyy/MM/dd");
52             boolean result = FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD, 
53                     FTP_BASE_PATH, imagePath, newName, uploadFile.getInputStream());
54             //返回結果
55             if(!result) {
56                 resultMap.put("error", 1);
57                 resultMap.put("message", "文件上傳失敗");
58                 return resultMap;
59             }
60             resultMap.put("error", 0);
61             resultMap.put("url", IMAGE_BASE_URL + imagePath + "/" + newName);
62             return resultMap;
63             
64         } catch (Exception e) {
65             resultMap.put("error", 1);
66             resultMap.put("message", "文件上傳發生異常");
67             return resultMap;
68         }
69     }
70 
71 }

這樣就行了完成了一整套的上傳