webuploader java版本

網上一些webuploader上傳的資料，有php版和java版本的，作了一下整合，現分享如下成果，能夠討論，不喜勿碰。說一下過程。

第一步：下載地址，提供官網地址

http://fex.baidu.com/webuploader/

第二步：示例頁面關鍵代碼

 

html頁面

<link rel="stylesheet" type="text/css" href="${ctx}/static/webuploader-0.1.5/webuploader.css" />     

<link rel="stylesheet" type="text/css" href="${ctx}/static/webuploader-0.1.5/css/diyUpload.css" /> 

<script type="text/javascript"  src="${ctx}/static/webuploader-0.1.5/webuploader.html5only.min.js"></script>

<script type="text/javascript"  src="${ctx}/static/webuploader-0.1.5/diyUpload.js"></script> 

<div id="box" class="win_body_txt" style="margin-left: 40px;width:40%; min-height:200px; background:#FF9">
                    <div id="test" ></div>
</div>

第三步：diyUpload,封裝了webuploader的自有js

 diyUpload.js，在此感謝「黑同窗」

/* 
*    jQuery文件上傳插件,封裝UI,上傳處理操做採用Baidu WebUploader;
*/
(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(){
                $fileInput.next('.parentFileBox').children('.diyButton').remove();
            });
            //綁定發送至服務端返回後觸發事件;
            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;    
                }
                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,jpeg,bmp,png",
                mimeTypes:"image/*"
            },
            //配置生成縮略圖的選項
            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:1,
            fileSizeLimit:500 * 1024,
            fileSingleSizeLimit:500 * 1024
        };
    }
    
    //實例化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 ( $parentFileBox.find('.diyButton').length <= 0 ) {
            
            var div = '<div class="diyButton"> \
                        <a class="diyStart" href="javascript:void(0)">上傳</a> \
                        <a class="diyCancelAll" href="javascript:void(0)">取消</a> \
                    </div>';
            $parentFileBox.append( div );
            var $startButton = $parentFileBox.find('.diyStart');
            var $cancelButton = $parentFileBox.find('.diyCancelAll');
            
            //開始上傳,暫停上傳,從新上傳事件;
            var uploadStart = function (){
                webUploader.upload();
                $startButton.text('暫停上傳').one('click',function(){
                        webUploader.stop();
                        $(this).text('繼續上傳').one('click',function(){
                                uploadStart();
                        });
                });
            }
                
            //綁定開始上傳按鈕;
            $startButton.one('click',uploadStart);
            
            //綁定取消所有按鈕;
            $cancelButton.bind('click',function(){
                //var fileArr = webUploader.getFiles( 'queued' );
                //修改獲取隊列的方法，不要參數，直接獲取全部隊列
                var fileArr = webUploader.getFiles();
                $.each( fileArr ,function( i, v ){
                    removeLi( $('#fileBox_'+v.id), v.id, webUploader );
                });
            });
        
        }
            
        //添加子容器;
        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 * 180;
        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+'" >');
            }
        });    
    }
    
    //獲取文件類型;
    function getFileTypeClassName ( type ) {
        var fileType = {};
        var suffix = '_diy_bg';
        fileType['pdf'] = 'pdf';
        fileType['zip'] = 'zip';
        fileType['rar'] = 'rar';
        fileType['csv'] = 'csv';
        fileType['doc'] = 'doc';
        fileType['xls'] = 'xls';
        fileType['xlsx'] = 'xls';
        fileType['txt'] = 'txt';
        fileType = fileType[type] || 'txt';
        return     fileType+suffix;
    }
    
})( jQuery );

function bindUpload(test,query){
    $('#'+test).diyUpload({
        url:'imgupload?query='+JSON.stringify(query),
        success:function( data ) {
            console.info( data );
        },
        error:function( err ) {
            console.info( err );    
        }
    });
};
這裏有一個問題，我使用原來的示例，「取消上傳」，是能夠取消的，可是，嵌入的個人網頁，就沒有反應，也不報錯，修改了一些代碼。以下：

            //綁定取消所有按鈕;
            $cancelButton.bind('click',function(){
                //var fileArr = webUploader.getFiles( 'queued' );
                //修改獲取隊列的方法，不要參數，直接獲取全部隊列
                var fileArr = webUploader.getFiles();
                $.each( fileArr ,function( i, v ){
                    removeLi( $('#fileBox_'+v.id), v.id, webUploader );
                });
            });

第四步：調用divupload.js,給test的div綁定事件

function bindUpload(test,query){
    $('#'+test).diyUpload({
        url:'imgupload?query='+JSON.stringify(query),
        success:function( data ) {
            console.info( data );
        },
        error:function( err ) {
            console.info( err );    
        }
    });
};

第五步：java後臺調用controler

@RequestMapping(value = "/imgupload")
    public void imgupload(HttpServletRequest request,
            HttpServletResponse response) throws IllegalStateException, IOException
    {
        String info = request.getParameter("query");
        JSONObject JInfo = JSONObject.fromObject(info);

        //imgs_path是img的實際保存路徑
        JInfo.element("imgs_path", imgs_path);

        //xuni_imgs_path是img的虛擬路徑，此處參考tomcat虛擬路徑的設置
        JInfo.element("xuni_imgs_path", xuni_imgs_path);
      
        int val = fileServcie.uploadImgs(request, JInfo);
        
        /*String message = JSONUtils.reMsg(val);
        this.ajax(response, message, AbstractBaseController.JSON);*/
        this.ajax(response, "上傳成功", AbstractBaseController.JSON);
    }

第六步：fileServcie.uploadImgs的上傳方法

public int uploadImgs(HttpServletRequest request,  
            JSONObject JInfo) throws IllegalStateException, IOException
    {
        int val = 0;
        String imgs_path = JInfo.getString("imgs_path");
        File destFile = new File(imgs_path);
        if(!destFile.exists())
        {
            destFile.mkdirs();
        }
        String tblname = JsonUtil.getJSONStringByKey(JInfo, "tblname");
        CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
                request.getSession().getServletContext());
        if(multipartResolver.isMultipart(request))
        {
             //將request變成多部分request
            MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
          //獲取multiRequest 中全部的文件名
            Iterator iter=multiRequest.getFileNames();
            
            while(iter.hasNext())
            {
                MultipartFile file=multiRequest.getFile(iter.next().toString());
                if(file!=null)
                {
                    long size = file.getSize();
                    String contentType = file.getContentType();
                    String fileName = file.getOriginalFilename();
                    if(!fileName.equals(""))
                    {
                        fileName = UUID.randomUUID()+fileName;
                        
                        String imgBasepath= imgs_path + fileName;
                        //上傳
                        file.transferTo(new File(imgBasepath));
                        
                       /* if(tblname.equals("ZJKB"))
                        {
                            ZywsptZjkb zywsptZjkb = new ZywsptZjkb();
                            zywsptZjkb.setId(BigDecimal.valueOf(JInfo.getLong("id")));
                            zywsptZjkb.setSctx(JInfo.getString("xuni_imgs_path")+fileName);
                            zywsptZjkb.setGxz(JInfo.getString("user"));
                            zywsptZjkb.setGxsj(new Date());
                            
                            val = zywsptZjkbMapper.updateByPrimaryKeySelective(zywsptZjkb);
                        }*/
                    }
                    
                }
            }
        }
        return val;
    }

此處使用的是multipartResolver的上傳組件，

在springxml中的配置以下：

<!-- 文件上傳 -->
<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"/>
        <property name="maxInMemorySize" value="1073741824"/>
        <property name="maxUploadSize" value="102400000"/>
</bean>

第七步：完成收功。