做项目的时候遇到一个webuploader的小坑，就是在一个页面上需要上传种类型图片的时候，不可能每个类型都去写一个实例吧～。
前端页面
在这里有独单上传的缩略图，也有根据房间类型上传的效果图，一共七个上传图片的按钮。网上找了一大堆，好多都是说用each循环来写的,试了都没什么用。后来自己琢磨了半天相出了一个解决办法：
大致思路是这样的，这些上传图片的按钮做一个点击事件来触发图片上传。通过参数区分图片上传后显示的位置。
html部分
<div class="row c1 clearfix">
<label class="form-label col-xs-3 col-sm-2">设计图效果：</label>
<div class="formControls col-xs-9 col-sm-10">
<input type="text" name="designImg" class="input-text none designImg" autocomplete="off" placeholder="">
<div class="tabBar clearfix">
<span data-id="1" class="current">卧室</span>
<span data-id="2">客厅</span>
<span data-id="3">餐厅</span>
<span data-id="4">玄关</span>
<span data-id="5">书房</span>
<span data-id="6">儿童房</span>
<span data-id="7">衣帽间</span>
<span data-id="8">阳台</span>
<span data-id="9">走廊</span>
<span data-id="10">其他</span>
</div>
</div>
</div>
<div class="row c1 clearfix">
<label class="form-label col-xs-3 col-sm-2"></label>
<div class="formControls col-xs-9 col-sm-10">
<div class="tabCon" style="display: block;">
<div class="photos">
<div class="photo">
<img data-url="/upload/api/201803/estate15210174177235.jpeg" src="http://ding8.oss-cn-shanghai.aliyuncs.com//upload/api/201803/estate15210174177235.jpeg" alt="" class="radius">
<div class="del">×</div>
</div>
</div>
<div class="">
<input class="btn btn-success radius addphoto" type="button" value="添加图片" style="margin-top: 20px;">
</div>
</div>
<div class="tabCon" style="display: none;">
<div class="photos">
<div class="photo">
<img data-url="/upload/banner/201803/banner15202403269470.jpeg" src="http://ding8.oss-cn-shanghai.aliyuncs.com//upload/banner/201803/banner15202403269470.jpeg" alt="" class="radius">
<div class="del">×</div>
</div>
</div>
<div class="">
<input class="btn btn-success radius addphoto" type="button" value="添加图片" style="margin-top: 20px;">
</div>
</div>
<div class="tabCon" style="display: none;">
<div class="photos">
</div>
<div class="">
<input class="btn btn-success radius addphoto" type="button" value="添加图片" style="margin-top: 20px;">
</div>
</div>
<div class="tabCon" style="display: none;">
<div class="photos">
</div>
<div class="">
<input class="btn btn-success radius addphoto" type="button" value="添加图片" style="margin-top: 20px;">
</div>
</div>
</div>
js代码
//上传设计图片
$('.addphoto').on('click', function () {
type=1;
$('#filePicker_1 div input').click();
});
//设计图片删除
$('.photos').on('click', '.photo .del', function () {
$(this).parent().remove();
});
//上传封面图
$('.cover .formControls').on('click', '.coverimg', function () {
type=2;
$('#filePicker_1 div input').click();
});
//重新上传封面图
$('.coverimg1').on('click', function () {
type=2;
$('#filePicker_1 div input').click();
})
//图片上传逻辑
var type = 1; //1封面图片2设计图片
var uploader = WebUploader.create({
duplicate: true,//是否可重复选择同一文
swf: 'lib/webuploader/0.1.5/Uploader.swf',
server: '{{url("/banner/upload")}}',
auto: true,
chunked: true,
pick: {
id: '#filePicker_1',
// id: '#filePicker_0',
multiple: false //禁止多选。
},
formData: {
_token:'{{ csrf_token() }}'
},
fileVal: "file",
compress: {
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
noCompressIfLarger: false, // 此属性可能会影响图片自动纠正功能
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 900 * 1024
}
});
//图片上传成功回调
uploader.on('uploadSuccess', function (file, response) {
if (response.code == 1) {
if (type == 1){
var nowtab = $('span.current').attr('data-id');
var nowblock = $('.tabCon').eq(nowtab-1);
nowblock.children('.photos').append('' +
'<div class="photo">' +
'<img data-url="/'+ response.fileName +'" src="'+ response.ImgPath +'" class="radius">' +
'<div class="del">×</div>' +
'</div>' +
'')
}
if (type == 2){
$('.cover .formControls .coverimg').remove();
$('.cover .formControls .coverimg1').remove();
$('.cover .formControls').append('' +
'<img class="radius coverimg" data-url="/'+ response.fileName +'" src="'+ response.ImgPath +'" alt="图片找不到啦">' +
'');
}
} else {
layer.msg(response.message);
}
});
//上传失败回调
uploader.on('uploadError', function (file, response) {
layer.msg('上传失败');
});
因为两种图片显示图片的html上下结构不一样所以只能在成功回掉的时候区分。
写完之后找了一下相关的资料，发现有一种很棒的方法来解决https://www.708034.cn/index/show/id/110.html
