前言：最近刚刚接触到微信端的开发，使用到了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代码我没有写出
});