一、前言

      在電商的網站中，圖片上傳功能必不可少，小編在最近的專案中就有遇到了一個批量上傳圖片並且要回顯的功能。可以說這是一個很常見的功能了，已經爛大街了，但是小編還是要認真的分析一下，以便日後用到。

二、上傳功能分析

      我實現的上傳框架是JQuery+SpringMvc+spring+FastDFS。

      前臺藉助KindEditor的上傳檔案的外掛，從而達到上傳和回顯的功能。關於KindEditor的使用，小編會在後面的文章中向大家介紹。

      實現的效果如下：

      實現流程：
      點選上傳圖片，會彈出“批量圖片上傳”的模態窗體，點選新增圖片，就可以選擇要新增的圖片，可以選擇一張，也可以選擇多張，點選開始上傳就會把選中的圖片上傳到FastDFS上面，然後回顯到空白的位置。

三、功能實現

3.1 前臺編寫

      上傳圖片按鈕：

      頁面初始化完畢後執行js中 的程式碼，它會建立一個富文字編輯器，然後進行初始化，初始化的時候，會呼叫Common.js中的createEditor方法，建立一個富文字編輯器。

      然後又會呼叫init方法，來例項化一個Common.js中的例項，初始化圖片上傳器。

<form id="itemAddForm" class="itemForm" method="post">
    <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload"
 
>上傳圖片</a>
</form>
<script type="text/javascript">
    var itemAddEditor ;
    //頁面初始化完畢後執行此方法
    $(function(){
        //建立富文字編輯器
        itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
        //初始化圖片上傳器
        TAOTAO.init({fun:function(node){

        }});
    });
</script
 
>

      Commom.js:

var TT = TAOTAO = {
    // 編輯器引數
    kingEditorParams : {
        //指定上傳檔案引數名稱，Controller中接收引數使用的引數名
        filePostName  : "uploadFile", 
        //指定上傳檔案請求的url。
        uploadJson : '/pic/upload',
        //上傳型別，分別為image、flash、media、file
        dir : "image"
    },
    createEditor : function(select){
        return KindEditor.create(select, TT.kingEditorParams);
    },
    init : function(data){
        // 初始化圖片上傳元件
        this.initPicUpload(data);
    },
    // 初始化圖片上傳元件
    initPicUpload : function(data){
        $(".picFileUpload").each(function(i,e){
            var _ele = $(e);
            _ele.siblings("div.pics").remove();
            _ele.after('\
                <div class="pics">\
                    <ul></ul>\
                </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='80' height='50' /></a></li>");
                    }
                }
            }
            //給“上傳圖片按鈕”繫結click事件
            $(e).click(function(){
                var form = $(this).parentsUntil("form").parent("form");
                //開啟圖片上傳視窗
                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(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
                            });
                            form.find("[name=image]").val(imgArray.join(","));
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    }
};

3.2 後臺的編寫

      後臺使用，就必須要先匯入兩個jar包：

• Commons-io.jar

• Commons-fileupload.jar

      然後在springmvc.xml中配置多媒體解析器：

<!-- 配置多媒體解析器 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 設定預設編碼 -->
        <property name="defaultEncoding" value="UTF-8"></property>
        <!-- 設定檔案上傳的最大值5MB，5*1024*1024 -->
        <property name="maxUploadSize" value="5242880"></property>
    </bean>

      響應的內容：

• 約定大於配置

      返回格式(JSON):

//成功時
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失敗時
{
        "error" : 1,
        "message" : "錯誤資訊"
}

需要建立一個pojo描述返回值。

Pojo中有三個屬性：error、url、message。

public class PictureResult {

    private int error;
    private String url;
    private String message;
    public int getError() {
        return error;
    }
    public void setError(int error) {
        this.error = error;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
}

3.2.1 Service層

      接收圖片資料，把圖片上傳到圖片伺服器，返回PictureResult 。需要使用FastDFSClient工具類。

• 引數：MultiPartFile pictureFile

• 返回值：PictureResult

@Service
public class PictureServiceImpl implements PictureService {

        @Override
        public PictureResult uploadPic(MultipartFile picFile) {
                PictureResult result = new PictureResult();
                //判斷圖片是否為空
                if (picFile.isEmpty()) {
                        result.setError(1);
                        result.setMessage("圖片為空");
                        return result;
                }
                //上傳到圖片伺服器
                try {
                        //取圖片副檔名
                        String originalFilename = picFile.getOriginalFilename();
                        //取副檔名不要“.”
                        String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
                        FastDFSClient client = new FastDFSClient("classpath:properties/client.conf");
                        String url = client.uploadFile(picFile.getBytes(), extName);
                        //把url響應給客戶端
                        result.setError(0);
                        result.setUrl(url);
                } catch (Exception e) {
                        e.printStackTrace();
                        result.setError(1);
                        result.setMessage("圖片上傳失敗");
                }
                return result;
        }

}

3.2.2 Controller

      接收上傳的圖片資訊，呼叫Service把圖片上傳到圖片伺服器。返回json資料。需要使用@ResponseBody

@Controller
public class PictureController {

    @Autowired
    private PictureService pictureService;
    @RequestMapping("/pic/upload")
    @ResponseBody
    public PictureResult uploadFile(MultipartFile uploadFile) {
        PictureResult result = pictureService.uploadPic(uploadFile);
        return result;
    }
}

四、小結

      批量匯入也是很有用的，匯入圖片，匯入文件，這些操作都可以為自己增分。