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

时间 2019-11-10

标签 webuploader 同一个页面支持多个按钮实例繁體版

原文原文链接

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

webuploder API网址，若是不懂我说的能够去查看http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_addButton
css

addButton

addButton( pick ) ⇒ Promise

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

uploader.addButton({ id: '#btnContainer', innerHTML: '选择文件' });

下面是我的实例：java

1.首先是页面 web

< = = => < = json

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

咱们用的模板是doT.js来遍历集合固然也有不少其余方式好比说最近见到用easyui框架也能够显示列表app

2. JavaScript 框架

var; ide

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关键代码ui

@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能够实例化多个按钮，这是重点，这样一个页面就支持多个评论了。