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