windows版nginx+ftp实现图片服务器的搭建

配置图片服务器的一部分参数

resource.properties:

#FTPu76f8u5173u914du7f6e
#FTPu7684ipu5730u5740
FTP_ADDRESS=192.168.3.27
FTP_PORT=21
FTP_USERNAME=ftpuser
FTP_PASSWORD=ftpuser
FTP_BASE_PATH=/www/images
#u56feu7247u670du52a1u5668u7684u76f8u5173u914du7f6e
#u56feu7247u670du52a1u5668u7684u57fau7840url
IMAGE_BASE_URL=http://192.168.3.27:8899/www/images

相关页面引入kindedtior的js

common.js:

Date.prototype.format = function(format){ 
    var o =  { 
    "M+" : this.getMonth()+1, //month 
    "d+" : this.getDate(), //day 
    "h+" : this.getHours(), //hour 
    "m+" : this.getMinutes(), //minute 
    "s+" : this.getSeconds(), //second 
    "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
    "S" : this.getMilliseconds() //millisecond 
    };
    if(/(y+)/.test(format)){ 
        format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
    for(var k in o)  { 
        if(new RegExp("("+ k +")").test(format)){ 
            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
        } 
    } 
    return format; 
};

var TT = TAOTAO = {
    // 编辑器参数
    kingEditorParams : {
        //指定上传文件参数名称
        filePostName  : "uploadFile",
        //指定上传文件请求的url。
        uploadJson : '/YouZhi-BackEng/pic/upload',
        //上传类型，分别为image、flash、media、file
        dir : "image"
    },
    // 格式化时间
    formatDateTime : function(val,row){
        var now = new Date(val);
        return now.format("yyyy-MM-dd hh:mm:ss");
    },
    // 格式化连接
    formatUrl : function(val,row){
        if(val){
            return "<a href='"+val+"' target='_blank'>查看</a>";            
        }
        return "";
    },
 
    init : function(data){
        // 初始化图片上传组件
        this.initPicUpload(data);
        // 初始化选择类目组件
        this.initItemCat(data);
    },
    // 初始化图片上传组件
    initPicUpload : function(data){
        $(".picFileUpload").each(function(i,e){   //.picFileUpload
            var _ele = $(e);
            _ele.siblings("div.pics").remove();
            _ele.after('
                <div class="pics" >
                    
                </div>');
            // 回显图片
            if(data && data.pics){
                var imgs = data.pics.split(",");
                for(var i in imgs){
                    if($.trim(imgs[i]).length > 0){
                        _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='120' height='80' /></a></li>");
                    }
                }
            }
            //给“上传图片按钮”绑定click事件
            $(e).click(function(){
                var form = $("#adForm");
                //打开图片上传窗口
                KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
                    var editor = this;
                    editor.plugin.multiImageDialog({
                        clickFn : function(urlList) {
                            var imgArray = [];
                            KindEditor.each(urlList, function(i, data) {
                                imgArray.push(data.url);
                                form.find(".pictures").append("<input type='hidden' name='cpicture' value="+data.url+">");
                                form.find(".pics").append("<a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='904' height='336' /></a><br>");
                            });
                            form.find("[name=image]").val(imgArray.join(","));
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    },
    
    
    // 初始化选择类目组件
    initItemCat : function(data){
        $(".selectItemCat").each(function(i,e){
            var _ele = $(e);
            if(data && data.cid){
                _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
            }else{
                _ele.after("<span style='margin-left:10px;'></span>");
            }
            _ele.unbind('click').click(function(){
                $("<div>").css({padding:"5px"}).html("<ul>")
                .window({
                    '500',
                    height:"450",
                    modal:true,
                    closed:true,
                    iconCls:'icon-save',
                    title:'选择类目',
                    onOpen : function(){
                        var _win = this;
                        $("ul",_win).tree({
                            url:'/item/cat/list',
                            animate:true,
                            onClick : function(node){
                                if($(this).tree("isLeaf",node.target)){
                                    // 填写到cid中
                                    _ele.parent().find("[name=cid]").val(node.id);
                                    _ele.next().text(node.text).attr("cid",node.id);
                                    $(_win).window('close');
                                    if(data && data.fun){
                                        data.fun.call(this,node);
                                    }
                                }
                            }
                        });
                    },
                    onClose : function(){
                        $(this).window("destroy");
                    }
                }).window('open');
            });
        });
    },
    
    createEditor : function(select){
        return KindEditor.create(select, TT.kingEditorParams);
    },
    
    /**
     * 创建一个窗口，关闭窗口后销毁该窗口对象。<br/>
     * 
     * 默认：<br/>
     * width : 80% <br/>
     * height : 80% <br/>
     * title : (空字符串) <br/>
     * 
     * 参数：<br/>
     * width : <br/>
     * height : <br/>
     * title : <br/>
     * url : 必填参数 <br/>
     * onLoad : function 加载完窗口内容后执行<br/>
     * 
     * 
     */
    createWindow : function(params){
        $("<div>").css({padding:"5px"}).window({
            width : params.width?params."80%",
            height : params.height?params.height:"80%",
            modal:true,
            title : params.title?params.title:" ",
            href : params.url,
            onClose : function(){
                $(this).window("destroy");
            },
            onLoad : function(){
                if(params.onLoad){
                    params.onLoad.call(this);
                }
            }
        }).window("open");
    },
    
    closeCurrentWindow : function(){
        $(".panel-tool-close").click();
    },
    
    changeItemParam : function(node,formId){
        $.getJSON("/item/param/query/itemcatid/" + node.id,function(data){
              if(data.status == 200 && data.data){
                 $("#"+formId+" .params").show();
                 var paramData = JSON.parse(data.data.paramData);
                 var html = "<ul>";
                 for(var i in paramData){
                     var pd = paramData[i];
                     html+="<li><table>";
                     html+="<tr><td colspan="2" class="group">"+pd.group+"</td></tr>";
                     
                     for(var j in pd.params){
                         var ps = pd.params[j];
                         html+="<tr><td class="param"><span>"+ps+"</span>: </td><td><input autocomplete="off" type="text"/></td></tr>";
                     }
                     
                     html+="</li></table>";
                 }
                 html+= "</ul>";
                 $("#"+formId+" .params td").eq(1).html(html);
              }else{
                 $("#"+formId+" .params").hide();
                 $("#"+formId+" .params td").eq(1).empty();
              }
          });
    },
    getSelectionsIds : function (select){
        var list = $(select);
        var sels = list.datagrid("getSelections");
        var ids = [];
        for(var i in sels){
            ids.push(sels[i].id);
        }
        ids = ids.join(",");
        return ids;
    },
    
    /**
     * 初始化单图片上传组件 <br/>
     * 选择器为：.onePicUpload <br/>
     * 上传完成后会设置input内容以及在input后面追加<img> 
     */
    initOnePicUpload : function(){
        $(".onePicUpload").click(function(){
            var _self = $(this);
            KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() {
                this.plugin.imageDialog({
                    showRemote : false,
                    clickFn : function(url, title, width, height, border, align) {
                        var input = _self.siblings("input");
                        input.parent().find("img").remove();
                        input.val(url);
                        input.after("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>");
                        this.hideDialog();
                    }
                });
            });
        });
    }
};

再自己写一个javascript：

<script type="text/javascript">
    var itemAddEditor ;
    //页面初始化完毕后执行此方法
    $(function(){
        //创建富文本编辑器
        itemAddEditor = TAOTAO.createEditor("#adForm [name=desc]");
        //itemAddEditor = KindEditor.create("#stepForm [name=desc]", TT.kingEditorParams);
        //初始化类目选择和图片上传器
        TAOTAO.init({fun:function(node){
            TAOTAO.changeItemParam(node, "itemAddForm");
        }});
    });
</script>

在页面上的from表单中写入这个代码，引入上传组件：

<span class="pictures"></span>
                                        <a href="javascript:void(0)"
                                        class="easyui-linkbutton picFileUpload">
                                        <span><input type="button" value="上传广告图片"></input></span> <br> <br>
                                    </a>
                                        <input type="submit" class="btn btn-default" value="提交">
                                        <div hidden="true">
                                            <textarea style="800px;height:300px;visibility:hidden;"
                                                name="desc">
                                            </textarea>
                            </div>

这个时候我们就可以看见页面上已经引入了一个文件上传组件

之后去后台编写controller和service

PictureController:

package com.youzhiback.controller;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.youzhiback.service.IPictureService;
import com.youzhiback.utils.JsonUtils;

@Controller
//图片上传controller
public class PictureController {

    @Autowired
    private IPictureService pictureService;
    
    @RequestMapping("/pic/upload")
    @ResponseBody
    public String pictureUpload(MultipartFile uploadFile) {
        Map result = pictureService.uploadPicture(uploadFile);
        //为了保证功能的兼容性，需要把Result转换成json格式的字符串。
        String json = JsonUtils.objectToJson(result);
        return json;
    }
}

PictureServiceImpl.java:

package com.youzhiback.service.impl;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import org.joda.time.DateTime;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.youzhiback.service.IPictureService;
import com.youzhiback.utils.FtpUtil;
import com.youzhiback.utils.IDUtils;

/**
 * 图片上传服务
 * <p>Title: PictureServiceImpl</p>
 * <p>Description: </p>
 * @version 1.0
 */
@Service
public class PictureServiceImpl implements IPictureService {
    
    @Value("${FTP_ADDRESS}")
    private String FTP_ADDRESS;
    @Value("${FTP_PORT}")
    private Integer FTP_PORT;
    @Value("${FTP_USERNAME}")
    private String FTP_USERNAME;
    @Value("${FTP_PASSWORD}")
    private String FTP_PASSWORD;
    @Value("${FTP_BASE_PATH}")
    private String FTP_BASE_PATH;
    @Value("${IMAGE_BASE_URL}")
    private String IMAGE_BASE_URL;

    @Override
    public Map uploadPicture(MultipartFile uploadFile) {
        Map resultMap = new HashMap();
        try {
            //生成一个新的文件名
            //取原始文件名
            String oldName = uploadFile.getOriginalFilename();
            //生成新文件名
            //UUID.randomUUID();
            String newName = IDUtils.genImageName();
            newName = newName + oldName.substring(oldName.lastIndexOf("."));
            //图片上传
            String imagePath = new DateTime().toString("/yyyy/MM/dd");
            boolean result = FtpUtil.uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD, 
                    FTP_BASE_PATH, imagePath, newName, uploadFile.getInputStream());
            //返回结果
            if(!result) {
                resultMap.put("error", 1);
                resultMap.put("message", "文件上传失败");
                return resultMap;
            }
            resultMap.put("error", 0);
            resultMap.put("url", IMAGE_BASE_URL + imagePath + "/" + newName);
            return resultMap;
            
        } catch (Exception e) {
            resultMap.put("error", 1);
            resultMap.put("message", "文件上传发生异常");
            return resultMap;
        }
    }

}

这样就好了完成了一整套的上传