web uploader 框架上传图片，java后台处理

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