js插件+UploadFile类实现图片的批量上传

        文件上传无疑是web应用中一个非常常用的功能，下面小编给大家分享一下diyUpload.js+ThinkPHP中的UploadFile类实现图片的批量上传。

        首先，给大家介绍展示一下具体操作页面：

html代码如下：

<div class="stepsTop">
    <!--进度条-->
    <ul class="steps clearfix" id="steps">
        <li class="active"><span>1</span>上传图片</li>
        <li><span>2</span>上传图片信息文件（可省略）</li>
        <li class="complete"><span>完成</span></li>
    </ul>
    <!--图片上传过程中，图片上传动态提示-->
    <div class="pic_operation clearfix"  style="display:none">
        <div class="lf_cont">
        	<em>已选中<span class="num" id="slNum">'+slNum+'</span>张图片<!--图片上传总数-->
        </div>
        <div class="btns">
            <strong>正在上传第<span class="num" id="nowNum">'+nowNum+'</span>张图片...</strong><a href="javascript:;" class="add " id="prevStep">继续添加</a><a href="javascript:;" class="nextStep" id="nextStep">开始上传</a>
        </div>
    </div>
    <ul class="stepsCont" id="stepsCont">
        <!--选择图片按钮-->
        <li class="cur">
            <div class="upload">
                <p class="pic_con"><img src="/NewWanbu/App/Photo/Tpl/Public/image/i_pic.jpg" alt=""></p>
                <p class="up_btn"><a href="javascript:;" id="slPicBtn">点击选择图片</a></p>
                <p>支持JPG、PNG、GIF格式图片，最多上传50张，图片文件名不能重复</p>
            </div>
        </li>
    </ul>  
</div>

        如图，最上方有操作进度条提示当前进度，下方是一个选择图片的按钮，点击按钮选择图片之后效果如下图所示：

        如果还想选择其他图片可以点击‘继续添加’按钮，选择想要上传的图片；或者已选中的图片不想要了，可以点击图片上的“X”按钮删除，如下：

页面上js代码如下：

   /*
    * 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
    * 其他参数同WebUploader
    */
    $('#slPicBtn').diyUpload({    //插件中的方法名
        url:'/NewWanbu/App/Photo/index.php/Photo/upload',
        success:function( data ) {
            console.info( data );
        },
        error:function( err ) {
            console.info( err );	
        }
    });

	//全部上传结束后触发;
	if($('#stepsCont').children().eq(1)){   //控制进度条的代码
		$('#nextStep').click(function(){
            $('#steps').children().eq(2).addClass('active');
            $('#prevStep').remove();
            $('#stepsCont').children().eq(1).hide();
		})	
	}

    function hasAlreadyFinish(n){
        var nowNum = $('.diySuccess').length;
        var n = 1;
        if(n<=nowNum){
            n++;
        }
        $('#nowNum').text(n);
    }

js插件中代码：

(function( $ ) {
    $.fn.extend({
        /*
        *   上传方法 opt为参数配置;
        *   serverCallBack回调函数 每个文件上传至服务端后,服务端返回参数,无论成功失败都会调用 参数为服务器返回信息;
        */
        diyUpload:function( opt, serverCallBack ) {
            if ( typeof opt != "object" ) {
                alert('参数错误!');
                return; 
            }
            
            var $fileInput = $(this);
            var $fileInputId = $fileInput.attr('id');
            
            //组装参数;
            if( opt.url ) {
                opt.server = opt.url; 
                delete opt.url;
            }
            
            if( opt.success ) {
                var successCallBack = opt.success;
                delete opt.success;
            }
            
            if( opt.error ) {
                var errorCallBack = opt.error;
                delete opt.error;
            }
            
            //迭代出默认配置
            $.each( getOption( '#'+$fileInputId ),function( key, value ){
                    opt[ key ] = opt[ key ] || value; 
            });
            
            if ( opt.buttonText ) {
                opt['pick']['label'] = opt.buttonText;
                delete opt.buttonText;  
            }
            
            var webUploader = getUploader( opt );
            
            if ( !WebUploader.Uploader.support() ) {
                alert( ' 上传组件不支持您的浏览器！');
                return false;
            }
            
            //绑定文件加入队列事件;
            webUploader.on('fileQueued', function( file ) {
                createBox( $fileInput, file ,webUploader);
            
            });
            
            //进度条事件
            webUploader.on('uploadProgress',function( file, percentage  ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar'); 
                $diyBar.show();
                percentage = percentage*100;
                showDiyProgress( percentage.toFixed(2), $diyBar);
                
            });
            
            //全部上传结束后触发;
            webUploader.on('uploadFinished', function(){
                $('.diyButton').remove();
                $fileInput.hide();
                $('#stepsCont').children().eq(1).show();
                $('#stepsCont').children().eq(0).hide();
                $('#steps').children().eq(1).addClass('active');
                $('.pic_operation').find('em').html('上传成功');
                $('#prevStep').remove();
                $('#nextStep').text('完成');  
            });

            //绑定发送至服务端返回后触发事件;
            webUploader.on('uploadAccept', function( object ,data ){
                if ( serverCallBack ) serverCallBack( data );
            });
            
            //上传成功后触发事件;
            webUploader.on('uploadSuccess',function( file, response ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar'); 
                $fileBox.removeClass('diyUploadHover');
                $diyBar.fadeOut( 1000 ,function(){
                    $fileBox.children('.diySuccess').show();
                });
                if ( successCallBack ) {
                    successCallBack( response );
                }
            });
            
            //上传失败后触发事件;
            webUploader.on('uploadError',function( file, reason ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar'); 
                showDiyProgress( 0, $diyBar , '上传失败!' );
                var err = '上传失败! 文件:'+file.name+' 错误码:'+reason;
                if ( errorCallBack ) {
                    errorCallBack( err );
                }
            });
            
            //选择文件错误触发事件;
            webUploader.on('error', function( code ) {
                var text = '';
                switch( code ) {
                    case  'F_DUPLICATE' : text = '该文件已经被选择了!' ;
                    break;
                    case  'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ;
                    break;
                    case  'F_EXCEED_SIZE' : text = '文件大小超过限制!';
                    break;
                    case  'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!';
                    break;
                    case 'Q_TYPE_DENIED' : text = '文件格式不支持!';
                    break;
                    default : text = '未知错误!';
                    break;  
                }
                if(text != "该文件已经被选择了!"){
                alert( text );
                }
            });
        }
    });
    
    //Web Uploader默认配置;
    function getOption(objId) {
        /*
        *   配置文件同webUploader一致,这里只给出默认配置.
        *   具体参照:http://fex.baidu.com/webuploader/doc/index.html
        */
        return {
            //按钮容器;
            pick:{
                id:objId,
                label:"点击选择图片"
            },
            //类型限制;
            accept:{
                title:"Images",
                extensions:"gif,jpg,png",
                mimeTypes:"image/*"
            },
            //swf路径
            swf: '/NewWanbu/App/Photo/Tpl/Public/Uploader.swf',
            disableGlobalDnd: true,
            
            //配置生成缩略图的选项
            thumb:{
                width:170,
                height:150,
                // 图片质量，只有type为`image/jpeg`的时候才有效。
                quality:70,
                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                allowMagnify:false,
                // 是否允许裁剪。
                crop:true,
                // 为空的话则保留原有图片格式。
                // 否则强制转换成指定的类型。
                type:"image/jpeg"
            },
            //文件上传方式
            method:"POST",
            //服务器地址;
            server:"",
            //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容
            sendAsBinary:false,
            // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失;
            chunked:true,
            // 分片大小
            chunkSize:512 * 1024,
            //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
            fileNumLimit:50,
            fileSizeLimit:50 * 2097152,
            fileSingleSizeLimit: 2097152  //2M
        };
    }
    
    //实例化Web Uploader
    function getUploader( opt ) {
        return new WebUploader.Uploader( opt );;
    }
    
    //操作进度条;
    function showDiyProgress( progress, $diyBar, text ) {
        if ( progress >= 100 ) {
            progress = progress + '%';
            text = text || '上传完成';
        }else{
            progress = progress + '%';
            text = text || progress;
        }
        
        var $diyProgress = $diyBar.find('.diyProgress');
        var $diyProgressText = $diyBar.find('.diyProgressText');
        $diyProgress.width( progress );
        $diyProgressText.text( text );
    }
    
    //取消事件; 
    function removeLi ( $li ,file_id ,webUploader) {
        webUploader.removeFile( file_id );
        if ( $li.siblings('li').length <= 0 ) {
            $li.parents('.parentFileBox').remove();
        } else {
            $li.remove();
        }
        
    }
    
    //创建文件操作div;    
    function createBox( $fileInput, file, webUploader ) {
        var file_id = file.id;
        var $parentFileBox = $fileInput.next('.parentFileBox');
        //添加父系容器;
        if ( $parentFileBox.length <= 0 ) {
            var div = '<div class="parentFileBox"> \
                    <ul class="fileBoxUl"></ul>\
                    </div>';
            $fileInput.after( div );
            $parentFileBox = $fileInput.next('.parentFileBox');
        }
        
        //创建按钮
        if ($('.up_btn').find('.diyButton').length <= 0 ) {
            var div = '<div class="diyButton"> \
                    <a class="diyStart" href="javascript:void(0)">开始上传</a> \
                    <a class="diyCancelAll" style="display:none" href="javascript:void(0)">全部取消</a> \
                    </div>';
            $('.up_btn').append( div );
            var $startButton = $('.up_btn').find('.diyStart');
            var $cancelButton = $('.up_btn').find('.diyCancelAll');
            
            //开始上传,暂停上传,重新上传事件;
            var uploadStart = function (){
                webUploader.upload(); 
                $('.btn').find('strong').show();
            }
                
            //绑定开始上传按钮;
            $startButton.one('click',uploadStart);
        }
            
        //添加子容器;
        var li = '<li id="fileBox_'+file_id+'" class="diyUploadHover"> \
                    <div class="viewThumb"></div> \
                    <div class="diyCancel"></div> \
                    <div class="diySuccess"></div> \
                    <div class="diyFileName">'+file.name+'</div>\
                    <div class="diyBar"> \
                    <div class="diyProgress"></div> \
                    <div class="diyProgressText">0%</div> \
                    </div> \
                </li>';     
        $parentFileBox.children('.fileBoxUl').append( li );
        
        //父容器宽度;
        var $width = $('.fileBoxUl>li').length * 190;
        var $maxWidth = $fileInput.parent().width();
        $width = $maxWidth > $width ? $width : $maxWidth;
        $parentFileBox.width( $width );
        var $fileBox = $parentFileBox.find('#fileBox_'+file_id);

        //绑定取消事件;
        var $diyCancel = $fileBox.children('.diyCancel').one('click',function(){
            removeLi( $(this).parent('li'), file_id, webUploader ); 
        });
        
        if ( file.type.split("/")[0] != 'image' ) {
            var liClassName = getFileTypeClassName( file.name.split(".").pop() );
            $fileBox.addClass(liClassName);
            return; 
        }
        
        //生成预览缩略图;
        webUploader.makeThumb( file, function( error, dataSrc ) {
            if ( !error ) { 
                $fileBox.find('.viewThumb').append('<img src="'+dataSrc+'" >');
            }
            var slNum = $.trim($('.fileBoxUl').children().length);
            $('.diyCancel').click(function(){
                if(slNum>0){
                    slNum--;
                    $('#slNum').html(slNum);
                }   
            })
            $('#slNum').html(slNum);
        }); 
        
        //添加流程操作按钮及上传显示
        $('.pic_operation').show();
        $('#slPicBtn').css({'position':'absolute','top':'178px','right':'156px','opacity': '0','filter':'alpha(opcacity=0)','width':'88px','height':'30px','line-height':'30px'});
        $('#slPicBtn').find('.webuploader-pick').text('继续添加').css({'backgroundColor':'#FFF','border':'1px solid #B4B4B4','color':'#6C6C6C'});
        $('.pic_con').hide();
        $('.pic_con').next().next().hide();
        }
        
    //获取文件类型;
    function getFileTypeClassName ( type ) {
        var fileType = {};
        var suffix = '_diy_bg';
        fileType['jpg'] = 'jpg';
        fileType['jpeg'] = 'jpeg';
        fileType['png'] = 'png';
        fileType['gif'] = 'gif';
        return  fileType+suffix;
    }
})( jQuery );

        图片选择完成后点击‘开始上传’按钮上传图片，上传完成后页面展示如下图：

        可以修改或者删除图片，也可以点击‘全选图片’按钮，批量删除图片，或者选择多张图片删除：

 PHP上传图片代码：

//上传图片
  public function upload(){
    import("ORG.Net.UploadFile");
    $wallid = $this->$wallid; 
    $path = SITE_PATH."/Uploads/photo/".$wallid.'/img/';//原图片保存目录
    $path_thumb = SITE_PATH."/Uploads/photo/".$wallid.'/thumb/';//缩略图保存目录
    //创建图片保存目录并附权限
    if(!file_exists(SITE_PATH."/Uploads/photo/".$wallid)){
      mkdir(SITE_PATH."/Uploads/photo/".$wallid, 0777);
    }
    if(!file_exists($path)){
       mkdir($path, 0777);
    }
    if(!file_exists($path_thumb)){
       mkdir($path_thumb, 0777);
    }
    
    $upload = new UploadFile();
    $upload->maxSize  = 1024*1024*2;
    $upload->allowExts  = array('jpg', 'gif', 'png', 'jpeg');
    $upload->savePath =  $path;
    $upload->thumb = true;
    $upload->thumbPrefix='m_,s_';
    $upload->thumbPath=$path_thumb;
    $upload->thumbMaxWidth='600,300';
    $upload->thumbMaxHeight='400,200';
    $upload->thumbRemoveOrigin=false;
    
    if(!$upload->upload()) {
      exit(json_encode( array( 'status'=>'0','info'=>$upload->getErrorMsg() ) ));
    }else{
      $info =  $upload->getUploadFileInfo();
    }

    $size = $info['0']['size'];
    $imgname = $info['0']['name'];
    $savename = $info['0']['savename'];
    $extension = $info['0']['extension'];

    if($size > 1024*1024*2){
      exit(json_encode( array( 'status'=>'2','info'=>"文件大小超过限制")));
    }else{
      if($extension=="jpg" || $extension=="JPG" || $extension=="gif" || $extension=="GIF" || $extension=="png" || $extension=="PNG" || $extension=="bmp" || $extension=="BMP"){
        //具体需求操作
      }else{
        exit(json_encode( array( 'status'=>'3','info'=>"上传文件格式错误")));
      }
    }
  }

       到此，批量上传图片就全部实现了，但是有一个bug一直困扰了小编很久，就是有些图片原图会成功上传，但缩略图会上传成黑色的图片，如图：

       如果聪明的你知道的话，记得分享一下哈。