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能夠實例化多個按鈕，這是重點，這樣一個頁面就支持多個評論了。