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

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

[html]
<!-- 引入Jquery -->
<script type="text/javascript" src="http://fex.baidu.com/webuploader/js/jquery-1.10.2.min.js"></script>

<!-- 引入webuploader.js插件 -->
<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>

<style type="text/css">
    .selfmedia_addtemplate_imgDelSpan{background: #999;border-radius: 10px;padding: 3px 7px;display: inline-block;position: absolute;margin-left: -18px;margin-top: -9px;}
    .selfmedia_addtemplate_imgDelSpan:hover{background: red;cursor: pointer;}
</style>
<!-- 内容区域 -->
<div class="maincontent clearfix">
    <div id="uploader-demo">
        <!--用来存放item-->  
        <div id="thelist" style="width:512px;height:73px" class="uploader-list"></div>  
        <div>  
         <div id="filePicker">选择图片</div>  
         <!-- <button id="ctlBtn" class="btn btn-default">开始上传</button> -->
        </div>  
    </div>
</div>
<script type="text/javascript">
    var weitoutiaoPhotoId = [];
    $(function(){
        var $list = $("#thelist");    //初始化
        //var $btn =$("#ctlBtn");   //开始上传  
        var thumbnailWidth = 56;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档  
        var thumbnailHeight = 56;
        
        var uploader = WebUploader.create({  
               auto: true,      // 选完文件后，是否自动上传。  
          
               // swf文件路径  
               swf: 'js/webuploader/Uploader.swf',  //
          
               // 文件接收服务端。  
               server: '/test/publish/photoupload', // 文件接收服务端
          
               // 选择文件的按钮。可选。  
               // 内部根据当前运行是创建，可能是input元素，也可能是flash.  
               pick: '#filePicker',  
               fileNumLimit:9,    //文件最多九个
               threads:1,        //上传并发数。上传多个会出现问题
               // 只允许选择图片文件。  
               accept: {  
                   title: 'Images',  
                   extensions: 'gif,jpg,jpeg,bmp,png',  
                   mimeTypes: 'image/*'  
               },
               method:'POST',  
           });

        // 当有文件添加进来的时候  
           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
    }

</script>
</body>
</html>

[结果]
上传成功返回的json为：
{"status":"success","message":"\u4e0a\u4f20\u6210\u529f\uff01","data":"8756"}