WebUploadでzipファイルをアップロードし、解凍する(写真を大量にアップロードするなど)

4808 ワード

  • フロントエンド
  • html

    tip: “ + ”( 16032051.jpg), JPG/JPEG, zip 。

    js

    var uploader = WebUploader.create({
    
                //        。
                server: '/user/uploadPhoto',
    
                //        。  。
                //            ,   input  ,    flash.
                pick:{
                    id:'#picker',
                    multiple:false  //       
                },
                chunked: true,//      
                dnd:"#drag_box",//         
                accept:{
                    title: 'Zip',
                    extensions: 'zip',
                    mimeTypes: 'application/zip,application/x-zip,application/x-zip-compressed',
                },//        
                fileNumLimit:1 //        
            });
    
            $("#ctlBtn").on('click',function () {//    
                uploader.upload();
            })
    
            //          ,     1                       
            uploader.on('beforeFileQueued',function () {
                console.log("before")
                uploader.reset();
                $("#thelist").empty();
            });
            //              
            uploader.on( 'fileQueued', function( file ) {
                console.log("add")
                $("#thelist").append( '
    ' + '

    ' + file.name + '

    ' + '

    ...

    ' + '
    ' ); }); // 。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); // if ( !$percent.length ) { $percent = $('
    ' + '
    ' + '
    ' + '
    ').appendTo( $li ).find('.progress-bar'); } $li.find('p.state').text(' '); $percent.css( 'width', percentage * 100 + '%' ); }); uploader.on( 'uploadSuccess', function( file ,data) { //data if(data.code==1){ $( '#'+file.id ).find('p.state').text(' '); }else{ $( '#'+file.id ).find('p.state').text(data.message); } }); uploader.on( 'uploadError', function( file ) { $( '#'+file.id ).find('p.state').text(' '); }); uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').fadeOut(); });
  • バックエンドjava
  • pom追加zip
            
                net.lingala.zip4j
                zip4j
                1.3.2
            
     コントローラ
     /***
         *       zip
         * @return
         */
        @RequestMapping("uploadPhoto")
        public ResponseModel uploadPhoto(MultipartFile file){
            String path=NGINX_LOCATION+"/photo/";
            File saveFile = new File(path+System.currentTimeMillis()+".zip");
            if(!saveFile.getParentFile().exists()){
                saveFile.getParentFile().mkdirs();
            }
            try {
                file.transferTo(saveFile);
                ZipFile zipFile = new ZipFile(saveFile); //  ZipFile
                zipFile.setFileNameCharset("UTF-8"); //    
                FileHeader fileHeader = (FileHeader) zipFile.getFileHeaders().get(0);//  zip      
                if(fileHeader.isDirectory()){//        ,             ,       ,               
                    saveFile.delete();
                    return ResponseModel.buildErrorUploadPhotoFormat();//  zip    
                }
                zipFile.extractAll(path);// zip    
                saveFile.delete();//  zip
                return ResponseModel.buildOk();
            } catch (IOException e) {
                e.printStackTrace();
                return ResponseModel.buildErrorUploadPhoto();
            } catch (ZipException e) {
                e.printStackTrace();
                return ResponseModel.buildErrorUploadPhoto();
            }
    
        }