開篇

• 前段時間逛了下曠視官網，真是變化好大頁面好漂亮現在，依稀記得最開始上的官網哪來這麼炫酷
• 然後就繼續點進去看了下Face++API，果不其然引數變了不少，識別點越來越多了
• 再接下來我又翻了翻自己很久前寫的一篇博文，這不行了，這之前寫的啥玩意，程式碼也找不到了，而且現在也不能用了，故，立了個flag

操刀

開始操刀了，還是一樣我選擇了SpringBoot，沒什麼，就是方便。這次選擇用BootStrap框架。

• 首先操刀之前，先去上面官網去註冊使用者，建立個應用，目的是為了獲取它的api-key和api-secret
• 現在不像之前那樣複雜了，那時候還得下個jar包匯入才能調它的方法，現在直接線上呼叫即可。具體程式碼如圖位置：
  
  這樣的話只需要把你需要識別的圖片路徑，你剛獲取的api-key和api-secret替換就行了，然後你就可以得到一串json格式的字串。太長我就不放了，主要資訊就在faces中。我這裡主要就是簡單獲取faces下面attributes中的一些引數。具體可直接看它官網的API，很詳細的。
• 圖片上傳我使用的是BootStrap-FileInput外掛，這個外掛確實很美觀，剛開始使用的時候不太會，故研究了會。特別需要注意需要匯入此外掛的js和css，不然你就會有種想砸鍵盤的感覺了。

html：

<div class="modal-body" style="text-align: center;"
 
>  
    <a href="" class="form-control" style="border:none;">上傳照騙</a>  
    <input type="file" name="picFile" id="picFile" class="file-loading" />  
</div>

js:

//引數1:控制元件id、引數2:上傳地址  
init("picFile", "/sendPic");

//初始化fileinput控制元件（第一次初始化）  
function init(ctrlName, uploadUrl)
 
 {  
    var control = $('#' + ctrlName);  
         //初始化上傳控制元件的樣式  
         control.fileinput({  
         language: 'zh',                                         //設定語言  
         uploadUrl: uploadUrl,                                   //上傳的地址  
         allowedFileExtensions: ['jpg', 'png', 'jpeg'],          //接收的檔案字尾  
         showUpload: true,                                       //是否顯示上傳按鈕  
         showCaption: false,                                     //是否顯示標題  
         browseClass: "btn btn-primary",                         //按鈕樣式       
         dropZoneEnabled: false,                               //是否顯示拖拽區域  
         //minImageWidth: 50,                                    //圖片的最小寬度  
         //minImageHeight: 50,                                   //圖片的最小高度  
         //maxImageWidth: 1000,                                  //圖片的最大寬度  
         //maxImageHeight: 1000,                                 //圖片的最大高度  
         maxFileSize: 2048,                                       //單位為kb，如果為0表示不限制檔案大小  
         //minFileCount: 0,  
         //maxFileCount: 10,                                       //表示允許同時上傳的最大檔案個數  
         //enctype: 'multipart/form-data',  
         validateInitialCount:true,  
         previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",  
         //msgFilesTooMany: "選擇上傳的檔案數量({n}) 超過允許的最大數值{m}！",  
         uploadExtraData:function (previewId, index) {           //傳參  
            var data = {  
                     //此處自定義傳參  
                    };  
                 return data;  
                }  
             });  

          //匯入檔案上傳完成之後的事件  
          $("#picFile").on("fileuploaded", function (event, data, previewId, index) {  

                });  
            }

檔案上傳成功後後臺還需要接收它，如何接收?且聽我慢慢道來：

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
List<MultipartFile> fileList = multipartRequest.getFiles(dstFileName);

這兩句可以接收到對應頁面上傳的圖片，List說明它可以一次上傳多張。既然能接收到，那就什麼都不是事了。接下來想怎麼玩就怎麼玩。

• 在頁面用到BootStrap模態框的時候我發現它不能拖拽，然後網上衝浪了一會，發現把jquery-ui匯入就可以使用draggable()方法。可全域性可單頁面，我這裡是全域性設定。

// 使模態框可拖拽          
$(document).on("show.bs.modal", ".modal", function(){
    $(this).draggable();
    $(this).css("overflow-y", "scroll");   
    // 防止出現滾動條，出現的話，你會把滾動條一起拖著走的
});

• 前端知識還需要惡補啊，現在頁面想做點炫酷的效果是一點辦法沒有，佈局排版還醜的一批。還需努力啊！

Screenshots

• Index

• One Person Result
  

• More than One Person Result
  

Links