webuploader上传多张照片的基本功能

[html]



<script type="text/javascript" src="http://fex.baidu.com/webuploader/js/jquery-1.10.2.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://fex.baidu.com/webuploader/css/webuploader.css">

<script type="text/javascript" src="http://fex.baidu.com/webuploader/js/webuploader.js"></script>

       // 当有文件添加进来的时候

          uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。

               var $li = $(

                      '<div id="' + file.id + '" class="file-item thumbnail" style="float:left">' +

                        '<img>' +

                        '<span title="删除" class="selfmedia_addtemplate_imgDelSpan remove-this" id="span_'+file.id+'" div_id="' + file.id + '">X</span>'+

                          //'<div class="info">' + file.name + '</div>' +

                      '</div>'

                   ),

           $img = $li.find('img');



             $list.append( $li );     // $list为容器jQuery实例

             //删除操作

             $li.on('click', '.remove-this', function() {

                uploader.removeFile( file, true );   //移除某一文件, 默认只会标记文件状态为已取消，如果第二个参数为 true 则会从 queue 中移除。



                helperuser_publish_delWeiToutiaoPicture(this, file.id);

           });



           /** 创建缩略图如果为非图片文件，可以不用调用此方法。

               thumbnailWidth x thumbnailHeight 为 100 x 100 */

           uploader.makeThumb( file, function( error, src ) {   //webuploader方法

               if ( error ) {

                   $img.replaceWith('<span>不能预览</span>');

                   return;

               }



               $img.attr( 'src', src );

           }, thumbnailWidth, thumbnailHeight );

       });

       //点击上传操作

          /*$btn.on( 'click', function() {

              //$('#photopicker').refresh();   //刷新选择框，继续选图片

            console.log("上传...");

            uploader.upload();

            console.log("上传结束...");

          }); */



       // 文件上传成功，给item添加成功class, 用样式标记上传成功。

       uploader.on( 'uploadSuccess', function( file, response ) {

           weitoutiaoPhotoId.push(response.data);//累加微头条的图片ID

           var successLi = $('#'+file.id);

           var success = successLi.find('div.success');

           if(!success.length){

               success = $('<div class="success"></div>').appendTo(successLi);

           }

           success.html('<span style="font-size: 12px;color:green">上传成功</span>');

           $('<div id='+file.id+'></div>').appendTo(success);

           //找到 × 给 × 的data属性赋值，用于删除数组中的文件ID

           var chaSpan = $('#span_'+file.id);   //找到span元素赋data属性

           chaSpan.attr('data', response.data);   //给span加上data属性

       });



       // 文件上传失败，显示上传出错。

       uploader.on( 'uploadError', function( file ) {

           var errorLi = $('#'+file.id);

           var error = errorLi.find('div.success');

           if(!error.length){

               error = $('<div class="success"></div>').appendTo(errorLi);

           }

           error.html('<span style="font-size: 12px;color:red">上传失败</span>');

           $('<div id='+file.id+'></div>').appendTo(error);

       });



   });

   /**

   * @todo删除图片操作

   * @param obj span × 按钮对象

   * @param file_id 整张图片的ID

   */

   function helperuser_publish_delWeiToutiaoPicture(obj, file_id){

       var photo_id = $(obj).attr('data');

       $('#'+file_id).remove();   //移除整张图片样式



       weitoutiaoPhotoId.splice($.inArray(photo_id,weitoutiaoPhotoId),1);   //删除数组的该文件ID

   }