webuploader在同一个页面支持多个按钮实例

之前在时候用到webuploader ,起初是支持单实例，后来要求支持多实例.

webuploder API网址，如果不懂我说的可以去查看http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_addButton

addButton

addButton( pick ) ⇒ Promise

添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟options.pick一致。

uploader.addButton({

    id: '#btnContainer',

    innerHTML: '选择文件'

});

下面是个人实例：

1.首先是页面

< = = =>
< =

=
= = = = = =>
>
>
= =></>
=>
= =>
=>
> = = > > = =
= = = = = = = =
= =
>
>
>
>
= =></>
> == = =>>>
>
>
>>
>
=
=>
=>< =>>
>
>
=>
= =
= = = =
= =>
= ==></>
==>>
= = =>
>
>
>
>
>
>
>
>
>>
> = = = ="evalution({{=ord.odetId}},{{=ord.prod_id}})"="per_evaluate_btn upload_btn" = >
>
>
>
>
</>
</>

我们用的模板是doT.js来遍历集合当然也有很多其他方式比如说最近见到用easyui框架也可以显示列表

2. JavaScript

var;

evacom = 1;
fileNumLimit = 10000;
multiple = ;
imgtype = ;
punit = ;
(oldImgUrl != ) {
getImgByJson(oldImgUrl);
() {
FormValidation.init();
bigImg(id) {
deal(id) {
evacom = id;
+ evacom);
}
amy_evaluate() {
$().css(, );
evaluate_off() {
).css(, );
//
showOrNo(ids) {
Imgmap = Map();
+ ids).raty({
width : 300
itid = + ids;
(i, item) {
(ids != item.id) {
,
multiple :
Map();
+ evacom, Imgmap);
$list = $( + evacom);
(Imgmothermap == ) {
evacom = ids;
,
multiple :
bloc = + ids;
$(bloc).toggle();
}

3. Upload上传 Java关键代码

@RequestMapping, method = RequestMethod.POST)

getImgurlbyfile(HttpServletResponse response,
maxSize = ;
JSONObject();
String imgtype = request.getParameter();
);
;
(Tools.isEmpty(imgtype)) {
, );
json.put(,
));
} {
(getBoolByType(myfile.getOriginalFilename().toLowerCase())) {
(myfile.getSize() <= maxSize) {
( != myfile && !myfile.isEmpty()) {
(imgtype) {
:
filePath = Tools.uploadpicByShow(myfile, imgtype,
, , , , );
json.put(, );
, );
json.put(, filePath);
;
:
);
, );
json.put(, );
, filePath);
;
:
filePath = Tools.uploadpic(myfile, imgtype);
, );
json.put(, );
, filePath);
;
{
, );
json.put(, BaseConfig.MESSAGE
));
}
{
json.put(, );
,
BaseConfig.MESSAGE.get());
{
, );
json.put(,
));
}
{
(UnsupportedEncodingException e) {
e.printStackTrace();
}

webupload.js

$list = $();

count=0;
var Map();
thumbnailWidth = 100;
var
,
fileVal : ,
,
duplicate : ,
server : SHOPDOMAIN+ ,
,
,
,
mimeTypes :
});
// 当有文件添加进来的时候
'fileQueued'function
$li = $(
+ ), $img = $li
);
$btns = $(
+
, () {
$( + file.id).stop()
//      .animate({
//          height : 30
//      });
, () {
+ file.id).stop()
// height : 0
// });
, , () {
index = $().index(), deg;
(index) {
0:
;
1:
$nextId=$(+file.id).next();
(undefined!=$nextId.attr()){
tempSrc=Imgmap.get($nextId.attr());
tempWu_File=$(+file.id);
Imgmap.put($nextId.attr(), Imgmap.get(file.id));
+ file.id).stop().animate({
height : 0
).html(Imgmap.toString());
;
2:
$prevId=$(+file.id).prev();
(undefined!=$prevId.attr()){
tempSrc=Imgmap.get($prevId.attr());
tempWu_File=$(+file.id);
), Imgmap.get(file.id));
Imgmap.put(file.id, tempSrc);
+ file.id).stop().animate({
).html(Imgmap.toString());
}
;
}
$list.append($li);
(error, src) {
(error) {
);
;
, src);
}, thumbnailWidth, thumbnailHeight);
// 文件上传过程中创建进度条实时显示。
'uploadProgress'(file, percentage) {
$li = $( + file.id), $percent = $li.find();
(!$percent.length) {
$percent = $(
);
}
, percentage * 100 + );
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
'uploadSuccess'(file, response) {
).css(,);
).html(Imgmap.toString());
$( + file.id).addClass();
// 文件上传失败，显示上传出错。
'uploadError'(file) {
$li = $( + file.id), $error = $li.find();
(!$error.length) {
$error = $(
);
// 完成上传完了，成功或者失败，先删除进度条。
'uploadComplete'(file) {
+ file.id).find().remove();
});
// 完成上传完了，成功或者失败，先删除进度条。
'error'(file) {
showMessage(file);
function
tempImgPath = $().html();
(Imgmap.size()==0){
).css(,);
}
).html(Imgmap.toString());
$( + fileId).remove();
function
).css(,);
( i=0; i<json.length; i++)
+json[i].id, json[i].uri);
$li = $(
'_160''">'
+ ), $img = $li
);
$btns = $(
'">'
, () {
tempId=$().attr();
$( + tempId).stop().animate({
, () {
tempId=$().attr();
+ tempId).stop().animate({
height : 0
, , () {
tempId=$().parent().attr();
index = $().index(), deg;
(index) {
0:
+tempId);
;
1:
$nextId=$(+tempId).next();
(undefined!=$nextId.attr()){
tempSrc=Imgmap.get($nextId.attr());
tempWu_File=$(+tempId);
Imgmap.put($nextId.attr(), Imgmap.get(+tempId));
+tempId, tempSrc);
$nextId.after(tempWu_File);
+tempId).stop().animate({
height : 0
).html(Imgmap.toString());
;
2:
$prevId=$(+tempId).prev();
(undefined!=$prevId.attr()){
tempSrc=Imgmap.get($prevId.attr());
tempWu_File=$(+tempId);
), Imgmap.get(+tempId));
Imgmap.put(+tempId, tempSrc);
+tempId).stop().animate({
).html(Imgmap.toString());
}
;
}
$list.append($li);
).html(Imgmap.toString());
}

原理，就是每次点击按钮的时候对按钮进行绑定事件

addButton

addButton( pick ) ⇒ Promise
,
});

每个按钮都有不同的id，所以说webuploader可以实例化多个按钮，这是重点，这样一个页面就支持多个评论了。

秒客网

webuploader在同一个页面支持多个按钮实例

addButton

相关文章