Baidu Web Uploaderの使い方

開発言語:JAVAプロジェクト使用:Spring MVC+Spring
フロントエンドはHDUpload関数をカプセル化し、ページ呼び出しを容易にします.プロジェクトは画像を伝える必要がないので、画像圧縮などの構成については書かれていません.

function HDUpload(){

    var state = 'pending';
    var uploader;

    var init=function(dnd,server,pickObj,btnContent,multiple,accept,threadsNum,formData,fileQueued,uploadProgress,uploadSuccess,uploadError,uploadComplete){
        //    Web Uploader
        uploader = WebUploader.create({
            //   Drag And Drop     
            dnd: dnd,
            // swf    
            swf: basePath+'/statics/js/webuploader-0.1.5/Uploader.swf',
            //        。
            server: server,
            //        。  。
            //            ，   input  ，    flash.
            pick: {
                id:pickObj,
                innerHTML:btnContent,
                multiple :multiple
            },
            //             ，   ：false
            chunked:true,
            // {Arroy} [  ] [   ：null]            
            accept:accept,
            //     true  ，         ，          
            auto:true,
            // [  ] [   ：3]      。           。
            threads:threadsNum,
            //   ，       、              hash Key.
            duplicate:true,
            formData:formData
        });

        //            
        uploader.on('fileQueued', function(file) {
            if(fileQueued)
                fileQueued(file);
        });

        //                 。
        uploader.on('uploadProgress', function(file, percentage) {
            if(uploadProgress)
                uploadProgress(file, percentage);
        });

        //         uploadSuccess  。
        uploader.on( 'uploadSuccess', function( file,response ) {
            if(uploadSuccess)
                uploadSuccess(file,response);
        });

        //         uploadError  
        uploader.on( 'uploadError', function( file,reason ) {
            if(uploadError)
                uploadError(file,reason);
        });

        //        ，           uploadComplete  
        uploader.on( 'uploadComplete', function( file ) {
            if(uploadComplete)
                uploadComplete(file,uploader);
        });

        uploader.on('all', function(type) {
            if(type === 'startUpload') {
                state = 'uploading';
            } else if(type === 'stopUpload') {
                state = 'paused';
            } else if(type === 'uploadFinished') {
                state = 'done';
            }
        });
    };

    return {init:init};
};

関数の呼び出し方法:

    var dnd=null;
    var server=type=='/file/upload';
    var pickObj='.picker';
    var btnContent='    ';
    var multiple=false;
    var accept=null;
    var threadsNum=3;
    var formData={stdId:stdId};

    new HDUpload().init(dnd,server,pickObj,btnContent,
    multiple,accept,threadsNum,formData,
        function(file) {
            //fileQueued
            ....
        },function(file, percentage) {
            //uploadProgress
            ....
        },function( file,response ) {
            //uploadSuccess
            ....
        },function( file,reason ) {
            //uploadError
            ....
        },function( file,uploader ) {
            //uploadComplete
            ....
        }
    );

バックグラウンドコード、分片アップロードをサポートして、秒伝の問題はIE 8の下でflashを修正して、游ぶことができなくて、soは支持しないでしょう.次のコードは全部ではありませんが、意味は正しいので、その通りにすれば必ず出てきます.

@RequestMapping("/upload")
@ResponseBody
public String upload(@RequestParam("file") CommonsMultipartFile file, Integer chunks,
Integer chunk, HttpSession session) {
    String path = null;
    String fileName = file.getOriginalFilename();
    String uploadTempDir = FileUtil.getSysConfig("uploadTempDir");

    path = FileUtil.getUploadFileName(user.getUsername() + "/", fileName);

    //        
    if (chunks == null) {

        File newFile = new File(path);
        file.transferTo(newFile);

        //    ，  （5M）  
    } else {

        String tempDir = uploadTempDir + user.getUsername() + "/" + fileName;
        File dir = FileUtil.createDir(tempDir);

        File partFile = new File(tempDir + "/" + chunk + ".part");
        file.transferTo(partFile);

        //     
        if (dir.listFiles().length == chunks) {

            String[] files = new String[chunks];
            ;
            for (int i = 0; i < chunks; i++) {

                files[i] = tempDir + "/" + i + ".part";
            }

            //   
            FileUtil.mergeFiles(path, files);

            //        
            FileUtil.delDir(tempDir);

        } else {
            return null;
        }
    }
}

いくつかの踏んだ穴は、ie 8の下でflashを使ってアップロードしたときに発生した問題です.
一、アップロードボタンをクリックしても反応しません:1、flashファイルの経路が正しいかどうかをチェックします2、上にパッケージされたHDUpload initメソッドのパラメータが必要でなければ、必ずnullを伝えます.例えばacceptは絶対に伝えないでください.
二、アップロードは成功したのに、ページはいつもuploadErrorの方法を歩いています.ファイルアップロード処理後、いくつかの操作結果をページに返す必要があるので、最初はバックグラウンドのuploadの方法が戻るときはStringではなくMapと書きました.jsonを自動的に回すことができるからです.しかし、上記の問題が発生しました.戻り値をStringに変更するだけでいいので、jsonはjacksonなどのツールで回すことができます.
三、アップロードパスが正しいのに、レポート400:バックグラウンドuploadメソッドで、パラメータ名にidがないので、名前を変えればいい.
そして楽しく遊ぶことができます.
まとめ:1、Web UploaderはUIに関与していないため、soフロントエンドの作成は非常に自由です.2、アップロードの進度はバックグラウンドを書く必要がなく、とても便利です.3、スライス同時アップロード、秒パス、より大きなファイルをサポートし、効率が高く、ユーザー体験がよい.
学習アドバイス:http://fex.baidu.com/webuploader/getting-started.html これに照らして例を書くhttp://fex.baidu.com/webuploader/doc/index.html APIは最初から最後まで見て、あなたは理解しました