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代码我没有写出
});

你可能感兴趣的:(Java)