前言：最近剛剛接觸到微信端的開發，使用到了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代碼我沒有寫出
});