标签：
百度图片上传组件：
页面：
<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;
}
标签：
原文地址：http://blog.csdn.net/lixld/article/details/51919762
