前言：最近剛剛接觸到微信端的開發，使用到了web uploader 框架作為上傳元件，初步接觸，走進了很多坑，在不斷的試驗，查文件基礎上終於解決了這個問題。再次記錄，希望能夠使其他使用此框架上傳圖片的初學者少走彎路。
目錄：
1.web uploader前臺程式碼實現
2.Java後臺接收處理
3.前臺圖片回顯（多張圖片上傳）

一.前臺程式碼：web uploader

1.前臺js，需要注意 上傳方式一定要設定成 sendAsBinary: true 。用火狐瀏覽器除錯時，可以看到設定後上傳content-type 為image型別。（這裡只是程式碼片段，需要注意的地方，並不完全）

        /*圖片上傳*/
        jQuery(function() {
            var $ = jQuery,
                    $list = $('#fileList'),
            // 優化retina, 在retina下這個值是2
                    ratio = window.devicePixelRatio || 1,
            // 縮圖大小
                    thumbnailWidth = 100 * ratio,
                    thumbnailHeight = 100
 
 * ratio,
            // Web Uploader例項
                    uploader;
            // 初始化Web Uploader
            uploader = WebUploader.create({
                // 自動上傳。
                auto: true,

                // 檔案接收服務端。
                server: '/uploadPic',// 此處伺服器測試時可以寫本地服務，上傳的Java後臺請求地址
                sendAsBinary: true
 
,// 上傳方式

                pick : {
                    id : '.filePicker',
                    //只能選擇一個檔案上傳
                    multiple: false

                },
                duplicate:true,//可以重複
                resize : true,// 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！
                // 只允許選擇檔案，可選。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,png,jpeg',
                    mimeTypes: 'image/*'
                },
            })
        });

二.Java後臺接受處理

@RequestMapping(value = "/uploadPic", method = RequestMethod.POST)
    public void uploadPic(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String name = request.getParameter("name");// 檔名稱
        String type = name.substring(name.lastIndexOf(".") + 1);// 檔案型別
        name = DateTools.getDateAndTime() + "." + type;// 重新定義圖片名稱，DateTools.getDateAndTime() 工具類，產生時間戳短碼，可以自己根據需求重新定義 

        String path ="xxx";//這裡儲存圖片路徑 D:\ 這樣
        path = path + File.separator + name;// 拼接路徑
        ServletInputStream inputStream = request.getInputStream();// ***獲取位元組流，圖片儲存在這裡,切記這裡只可以獲取一次。***
        File uploadFile = new File(path);// 路徑檔案，一定要有資料夾，沒有則建立，mkdir
        FileCopyUtils.copy(inputStream, new FileOutputStream(uploadFile));// 複製圖片
        inputStream.close();// 關閉io，這裡寫的簡陋了些，程式碼從簡

        String realPath= uploadFile.getPath();//realPath 為圖片真路徑
        // 格式 ： http://192.1.1.1/xxxx/name 類似這樣在公網顯示
        JSONObject json = new JSONObject();
        json.put("path", realPath);// 引用路徑
        json.put("flag", "success");// 標識
        response(response, json.toJSONString());// 儲存圖片完成，返回前臺進行回顯
    }

三..前臺圖片回顯（多張圖片上傳）

這裡是我的前臺html程式碼，需要注意的是div巢狀的的排序格式。

<div class="pro-upload s">
 <div class="pro-uploads">
     <img id="img5" src="xxx/images/pro_img_07_07.png"><!-- 初始引用圖片路徑 -->
     <a href="javascript:void(0);" class="btn-tu filePicker btn_cl webuploader-container" imagetype="5">
         <div class="webuploader-pick"></div>
         <div style="top: 0px; left: 0px; width: 100%; height: 100px; overflow: hidden;">
             <input type="hidden" name="lgback_picpath" id="lgback_picpath"/>
             <input type="file" name="lgback_picpath_n" id="lgback_picpath_n" class="webuploader-element-invisible" accept="image/*">
             <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
         </div>
     </a>
     <span id="close5" class="colse_cl" style="display:none;"><img src="${preserverStyleServierPath}/images/cose1.png"></span>
 </div>
 <div class="frm-txt-center" name="lgback_name">測試圖片05</div>
</div>

webuploader 程式碼，可以根據var uploaderId = ‘rt_’+file.source.ruid; 這種方式獲取當前上傳div的id，用chrom可以發現，當圖片上傳時頁面會浮動出一個臨時div而這種獲取id 的方式就是獲取臨時div 的id，再根據臨時div 的id定位到html頁面原本的div 確定回顯未知，img型別，將傳回來的路徑傳入img即可。

uploader.on( 'uploadSuccess', function( file,str ) {
mui.alert("上傳成功","提示資訊","確定");

var uploaderId = 'rt_'+file.source.ruid;// 獲取當前節點id
var $this = $("#"+uploaderId).parent();// 獲取當前節點父類節點 a標籤
var par = $this.parent();// 獲取當前節點祖父節點 div
par.find("img:first").attr("src",str.path);// 獲取祖父節點下第一個img標籤，並賦值
par.find("a:first").find("div:first").find("div:last").find("input:first").attr("value",str.pathPic);// 這裡是將儲存在資料庫中的路徑寫入input中 pathPic 是存在資料庫中的格式，這裡的Java程式碼我沒有寫出
});