webuploader在同一个页面支持多个按钮实例，类似京东那样的评论
之前在公司做电商时候用到webuploader ,起初是支持单实例，后来要求支持多实例，当时工作忙没有写博客，现在闲下来了 所以个人写个总结。
webuploder API网址，如果不懂我说的可以去查看http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_addButton
1.首先是页面
我们用的模板是doT.js来遍历集合 当然也有很多其他方式 比如说最近见到 用easyui框架 也可以显示列表
2. JavaScript
var oldImgUrl = '${userCommentInfo}';//修改-以前的图片信息json格式
var evacom = 1;
var fileNumLimit = 10000;
var multiple = false;
var imgtype = "userCommentImg";
var punit = "${userCommentInfo.unit}";
if (oldImgUrl != "") {
getImgByJson(oldImgUrl);
}
jQuery(document).ready(function() {
FormValidation.init();
});
function bigImg(id) {
evacom = id;
}
function deal(id) {
evacom = id;
$list = $("#fileList_" + evacom);
}
function amy_evaluate() {
$(".per_evaluate").css("display", "block");
}
function evaluate_off() {
$(".per_evaluate").css("display", "none");
}
//
function showOrNo(ids) {
Imgmap = new Map();
$('#w-stars_' + ids).raty({
width : 300
});
evacom = ids;
/* var fileNumLimit_evacom = 5; */
var itid = "#filePicker_" + ids;
$.each(Imgmothermap, function(i, item) {
if (ids != item.id) {
uploader.addButton({
id : itid,
innerHTML : '选择图片（最多上传5张图片）',
multiple : false
});
}
});
Imgmap = new Map();
Imgmothermap.put("eva_" + evacom, Imgmap);
$list = $("#fileList_" + evacom);
if (Imgmothermap == null) {
evacom = ids;
uploader.addButton({
id : itid,
innerHTML : '选择图片（最多上传5张图片）',
multiple : false
});
}
var bloc = "#form-horizontal_" + ids;
$(bloc).toggle();
}@RequestMapping(value = "/getImgurlbyfile", method = RequestMethod.POST)
public void getImgurlbyfile(HttpServletResponse response,
HttpServletRequest request) {
long maxSize = 3000000;// 图片的大小
JSONObject json = new JSONObject();
String imgtype = request.getParameter("imgtype");
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile myfile = multipartRequest.getFile("imgfile");
String filePath = null;
if (Tools.isEmpty(imgtype)) {
json.put("res_code", "ER1003");
json.put("res_msg",
BaseConfig.MESSAGE.get("publicInterface.ER1003"));
} else {
if (getBoolByType(myfile.getOriginalFilename().toLowerCase())) {
if (myfile.getSize() <= maxSize) {
if (null != myfile && !myfile.isEmpty()) {
switch (imgtype) {// 判断上传图像类型
case "productImg":// 商品 300 *300
filePath = Tools.uploadpicByShow(myfile, imgtype,
160, 50, 300, 640, 1000);
json.put("res_code", "0");
json.put("res_msg", "OK");
json.put("filePath", filePath);
break;
case "userCommentImg":// 商品 200 *200
filePath = Tools.uploadpicByShow(myfile, imgtype,
200);
json.put("res_code", "0");
json.put("res_msg", "OK");
json.put("filePath", filePath);
break;
default:
filePath = Tools.uploadpic(myfile, imgtype);
json.put("res_code", "0");
json.put("res_msg", "OK");
json.put("filePath", filePath);
break;
}
} else {
json.put("res_code", "ER1001");
json.put("res_msg", BaseConfig.MESSAGE
.get("publicInterface.ER1001"));
}
} else {
json.put("res_code", "ER1008");
json.put("res_msg",
BaseConfig.MESSAGE.get("publicInterface.ER1008"));
}
} else {
json.put("res_code", "ER1007");
json.put("res_msg",
BaseConfig.MESSAGE.get("publicInterface.ER1007"));
}
}
try {
responseAjax(json, response);
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}webupload.js
$list = $("#fileList");//图片存放位置
var count=0;//已经上传的照片数量，用于修改删除或者修改的时候，默认成功图片数量
var Imgmap = new Map();//存储图片得map
thumbnailWidth = 100;
thumbnailHeight = 100;
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto : true,
fileVal : 'imgfile',
formData : {
imgtype:imgtype
},
// swf文件路径
swf : SHOPDOMAIN+ '/js/webuploader/Uploader.swf',
duplicate : true,
// 文件接收服务端。
server : SHOPDOMAIN+ '/publicinterface/getImgurlbyfile.html',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick : '#filePicker',
// 只允许选择图片文件。
accept : {
title : 'Images',
extensions : 'gif,jpg,jpeg,bmp,png',
mimeTypes : 'image/*'
},
fileNumLimit :fileNumLimit,
fileSingleSizeLimit : '3000000'
});
// 当有文件添加进来的时候
uploader.on('fileQueued',function(file) {
var $li = $(''
+ '![]()
'
+ ''
+ file.name + '' + ''), $img = $li
.find('img');
$btns = $(
''
+ '删除')
.appendTo($li);
$li.on('mouseenter', function() {
$('.fp_' + file.id).stop()
// .animate({
// height : 30
// });
});
$li.on('mouseleave', function() {
$('.fp_' + file.id).stop()
// .animate({
// height : 0
// });
});
$btns.on('click', 'span', function() {
var index = $(this).index(), deg;
switch (index) {
case 0://删除
uploader.setStats(8);
delImg(file.id);
return;
case 1://右移
var $nextId=$("#"+file.id).next();
if(undefined!=$nextId.attr("id")){
var tempSrc=Imgmap.get($nextId.attr("id"));
var tempWu_File=$("#"+file.id);
Imgmap.put($nextId.attr("id"), Imgmap.get(file.id));
Imgmap.put(file.id, tempSrc);
$nextId.after(tempWu_File);
$('.fp_' + file.id).stop().animate({
height : 0
});
$("#imgPathWebUploader").html(Imgmap.toString());
}
break;
case 2://左移
var $prevId=$("#"+file.id).prev();
if(undefined!=$prevId.attr("id")){
var tempSrc=Imgmap.get($prevId.attr("id"));
var tempWu_File=$("#"+file.id);
Imgmap.put($prevId.attr("id"), Imgmap.get(file.id));
Imgmap.put(file.id, tempSrc);
$prevId.before(tempWu_File);
$('.fp_' + file.id).stop().animate({
height : 0
});
$("#imgPathWebUploader").html(Imgmap.toString());
}
break;
}
});
// $list为容器jQuery实例
$list.append($li);
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb(file, function(error, src) {
if (error) {
$img.replaceWith('不能预览');
return;
}
$img.attr('src', src);
}, thumbnailWidth, thumbnailHeight);
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function(file, percentage) {
var $li = $('#' + file.id), $percent = $li.find('.progress span');
// 避免重复创建
if (!$percent.length) {
$percent = $('
').appendTo(
$li).find('span');
}
$percent.css('width', percentage * 100 + '%');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function(file, response) {
Imgmap.put(file.id, response.filePath );
$("#isfirstWebUploader").css("display","");
$("#imgPathWebUploader").html(Imgmap.toString());
$('#' + file.id).addClass('upload-state-done');
});
// 文件上传失败，显示上传出错。
uploader.on('uploadError', function(file) {
var $li = $('#' + file.id), $error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
$error = $('').appendTo($li);
}
$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete', function(file) {
$('#' + file.id).find('.progress').remove();
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on('error', function(file) {
showMessage(file);
});
function delImg(fileId) {
var tempImgPath = $("#imgPathWebUploader").html();
Imgmap.remove(fileId);
if(Imgmap.size()==0){
$("#isfirstWebUploader").css("display","");
}
$("#imgPathWebUploader").html(Imgmap.toString());
$("#" + fileId).remove();
}
function getImgByJson(json){
json = eval(json)
$("#isfirstWebUploader").css("display","");
for(var i=0; i'
+ '+')
'
+ ''
+ json[i].uri + '' + ' '
+ '删除'
+ '向右旋转'
+ '向左旋转
')
.appendTo($li);
$li.on('mouseenter', function() {
var tempId=$(this).attr("id");
$('.fp_' + tempId).stop().animate({
height : 30
});
});
$li.on('mouseleave', function() {
var tempId=$(this).attr("id");
$('.fp_' + tempId).stop().animate({
height : 0
});
});
$btns.on('click', 'span', function() {
var tempId=$(this).parent().attr("id");
var index = $(this).index(), deg;
switch (index) {
case 0://删除
uploader.setStats(8);
delImg("WU_10000"+tempId);
return;
case 1://右移
var $nextId=$("#WU_10000"+tempId).next();
if(undefined!=$nextId.attr("id")){
var tempSrc=Imgmap.get($nextId.attr("id"));
var tempWu_File=$("#WU_10000"+tempId);
Imgmap.put($nextId.attr("id"), Imgmap.get("WU_10000"+tempId));
Imgmap.put("WU_10000"+tempId, tempSrc);
$nextId.after(tempWu_File);
$('.fp_WU_10000'+tempId).stop().animate({
height : 0
});
$("#imgPathWebUploader").html(Imgmap.toString());
}
break;
case 2://左移
var $prevId=$("#WU_10000"+tempId).prev();
if(undefined!=$prevId.attr("id")){
var tempSrc=Imgmap.get($prevId.attr("id"));
var tempWu_File=$("#WU_10000"+tempId);
Imgmap.put($prevId.attr("id"), Imgmap.get("WU_10000"+tempId));
Imgmap.put("WU_10000"+tempId, tempSrc);
$prevId.before(tempWu_File);
$('.fp_WU_10000'+tempId).stop().animate({
height : 0
});
$("#imgPathWebUploader").html(Imgmap.toString());
}
break;
}
});
// $list为容器jQuery实例
$list.append($li);
}
count=i;
$("#imgPathWebUploader").html(Imgmap.toString());
}
原理， 就是每次点击按钮的时候 对按钮进行绑定事件
addButton
addButton( pick ) ⇒ Promise
添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟options.pick一致。
uploader.addButton({
id: '#btnContainer',
innerHTML: '选择文件'
});每个按钮都有不同的id，所以说webuploader可以实例化多个按钮，这是重点，这样一个页面就支持多个评论了。
这里留下个人的qq 178970412 有问题可以一起讨论 相互学习