百度上传组件：webuploader

百度图片上传组件：

页面：

<div class="upload">
<section>
<article>
<div class="wu-example">
<div id="fileList" class="uploader-list"></div>
      <span id="picker">上传出生证明</span>
</div>
       <div id="thumb"></div>
</article>
<div class="load" id="loading1" style="display: none"></div>
</section>


</div>

JS

坑1：路径

坑2：IOS和安卓不同，导致调用方式改变

$(document).ready(function(){
 	var serverUrl ;//默认值

 	var environment = "ceshi";//xiangshang,ceshi ,bendi
 	var baseurl = '<%=basepath%>';
// 	 	alert(baseurl);
	var u = navigator.userAgent;
	if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
//			alert("安卓手机");
			if(environment=="xiangshang"){
				serverUrl = "/hd/6/updateHeadImgNew";//线上环境(hd是线上做了nginx路径映射)
			}else if(environment=="ceshi"){
				serverUrl = "/6/updateHeadImgNew";//测试环境
			}else if(environment=="bendi"){
				serverUrl = baseurl+"/6/updateHeadImgNew";//本地环境
			}
	} else if (u.indexOf('iPhone') > -1) {//苹果手机
// 			alert("苹果手机");
			if(environment=="xiangshang"){
				serverUrl = "/hd/6/updateHeadImg";//线上环境(hd是线上做了nginx路径映射)
			}else if(environment=="ceshi"){
				serverUrl = "/6/updateHeadImg";//测试环境
			}else if(environment=="bendi"){
				serverUrl = baseurl+"/6/updateHeadImg";//本地环境
			}
	} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
//			alert("winphone手机");
		if(environment=="xiangshang"){
			serverUrl = "/hd/6/updateHeadImg";//线上环境(hd是线上做了nginx路径映射)
		}else if(environment=="ceshi"){
			serverUrl = "/6/updateHeadImg";//测试环境
		}else if(environment=="bendi"){
			serverUrl = baseurl+"/6/updateHeadImg";//本地环境
		}
	}else{
// 			alert("其他");
		if(environment=="xiangshang"){
			serverUrl = "/hd/6/updateHeadImg";//线上环境(hd是线上做了nginx路径映射)
		}else if(environment=="ceshi"){
			serverUrl = "/6/updateHeadImg";//测试环境
		}else if(environment=="bendi"){
			serverUrl = baseurl+"/6/updateHeadImg";//本地环境
		}
	}
	
// 		alert(serverUrl);
	
	var uploader = WebUploader.create({
	    // swf文件路径
	    swf: 'webuploader/Uploader.swf',
	    auto: true,
	    // 文件接收服务端。
	    server: serverUrl,//本地测试地址
	    
// 	    server: '/hd/6/updateHeadImgNew',//线上地址
	    
	    
	    fileVal :'image',
	    
	    //缩略图
	    thumb:{
	        width: 100,
	        height: 100,
	
	        // 图片质量，只有type为`image/jpeg`的时候才有效。
	        quality: 70,
	
	        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
	        allowMagnify: false,
	
	        // 是否允许裁剪。
	        crop: true,
	
	        // 为空的话则保留原有图片格式。
	        // 否则强制转换成指定的类型。
	        type: 'image/jpeg'
	    },
	    
	    
	    compress:{
	        width: 1000,
	        height: 1000,
	
	        // 图片质量，只有type为`image/jpeg`的时候才有效。
	        quality: 90,
	
	        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
	        allowMagnify: false,
	
	        // 是否允许裁剪。
	        crop: false,
	
	        // 是否保留头部meta信息。
	        preserveHeaders: true,
	
	        // 如果发现压缩后文件大小比原来还大，则使用原来图片
	        // 此属性可能会影响图片自动纠正功能
	        noCompressIfLarger: false,
	
	        // 单位字节，如果图片大小小于此值，不会采用压缩。
	        compressSize: 0
	    },
	
	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#picker',
	
	    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	    resize: true,
	    
	    //目前移动端有几个重要的 bug 在此列出来以免大家踩坑。
	    
		/*
		上传请求内容为空，这是 android 4 的一个bug，只要 file 的 blob数据修改过，通过 xhr2 去发送就有这个问题。 详情：https://code.google.com/p/android/issues/detail?id=39882
		
		解决方案： 发送的时候采用二进制方案，即 把 sendAsBinary 设置成true, 通过这种方式可以避免这个问题。后端接受需要小改动一下。
		*/
	    
	    sendAsBinary:true,
	    
	    fileNumLimit:1,
	    // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	    
	});
	uploader.on( 'fileQueued', function( file ) {
	    uploader.makeThumb( file, function( error, ret ) {
	        if ( error ) {
	            $li.text('预览错误');
	        } else {
		        $("#picker").first("div").html("");
	        	$("#thumb").html('<img alt="" src="' + ret + '" />');
	        	$("#loading1").show();
	        }
	    });
	});
	uploader.on( 'uploadSuccess', function( file,result ) {
	 	$( '#'+file.id ).addClass('upload-state-done');
		var	 qiuniuurl1 = result.data.usIco;
		$("#pichidden_1").val(qiuniuurl1);
		$("#loading1").hide();
		
	});
});

服务器程序：

IOS调用

@RequestMapping("/updateHeadImg")
	@ResponseBody
	public ApiResult updateHeadImg(String name) {
		ApiResult apiResult = new ApiResult();


		byte[] imageByte = null;

		try {
			InputStream inputStream = getRequest().getInputStream();
			imageByte = org.apache.commons.io.IOUtils.toByteArray(inputStream);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		// 上传文件
		if (imageByte.length>0) {

			String filename = UUIDUtil.getUUID() + name;

			String key ="";
			if (upurl != null) {
				Date date = new Date();
				SimpleDateFormat sdf = new SimpleDateFormat("YYYYMMdd");
				String dateUrl = sdf.format(date);
				key = upurl + dateUrl + "/" + filename;
			}
//				byte[]  imageByte = this.cropBytes(image.getInputStream(), 420);
				System.out.println("key------------------------"+key);
				boolean flag = QiniuUtil.IVYBABY.uploadFile(key, imageByte);
				System.out.println("flag:----------------"+flag);
				
				
				System.out.println("上传七牛：" + flag);
			apiResult.getData().put("usIco",BASE_QN_URL+key+"?imageView2/1/w/420");
		} else {
			
			
			
			
			apiResult.setMsg("图片不能为空");
		}
		System.out.println(JSON.toJSONString(apiResult));
		
		return apiResult;
	}

安卓调用：

@RequestMapping("/updateHeadImgNew")
	@ResponseBody
	public ApiResult updateHeadImgNew() {
		ApiResult apiResult = new ApiResult();
		String imgUrl = "";
		InputStream inputStream = null;
		String bendiPic = "";
		try {
			inputStream = getRequest().getInputStream();
			//当前日期
			Date date = new Date();
			SimpleDateFormat sdf = new SimpleDateFormat("YYYYMMdd");
			String dateUrl = sdf.format(date);
			String path="/static/imgtest/"+dateUrl;//线上路径
			
//			String path="D://imgtest/"+dateUrl;//测试
			
			//创建文件夹
			File f = new File(path);
			if(!f.exists())
				f.mkdirs(); 
			//上传图片到本地
			bendiPic = path+"/"+UUIDUtil.getUUID()+".png";//线上地址
			System.out.println("bendiPic:"+bendiPic);
			//裁切,并保存本地
			ImageUtil.crop(inputStream, 420, bendiPic);
			System.out.println("-----------本地保存路径：-----------"+bendiPic);
			
			
			
			//准备key
			String filename = UUIDUtil.getUUID() + ".png";
			String key = upurl + dateUrl + "/" + filename;
			
			//上传七牛
			boolean flag = QiniuUtil.IVYBABY.uploadFile(key, bendiPic);
			//如果上传七牛失败，则返回本地路径
			if(flag){
				imgUrl = BASE_QN_URL+key+"?imageView2/1/w/420";
			}else{
				//这里做的文件映射,用域名映射上面的真是路径/static/imgtest/xxxxx.png
				imgUrl = "static.ivybaby.me/imgtest/"+bendiPic;
			}
			apiResult.getData().put("usIco",imgUrl);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			apiResult.setMsg("图片不能为空");
			e.printStackTrace();
		}
		
		System.out.println("--------------imageUrl--------------【"+imgUrl+"】");
		return apiResult;
	}