webuploader java分片上传

最新推荐文章于 2025-07-11 12:11:05 发布

原创最新推荐文章于 2025-07-11 12:11:05 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#webuploader #java

java web 技术专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个使用Spring MVC框架实现的WebUploader分片上传功能。该功能支持文件的分片上传、合并以及进度显示。通过Java后台处理，实现文件上传的效率优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webuploader java分片上传

import java.io.File;
import java.io.FileOutputStream;
import java.util.Date;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import org.apache.commons.io.FileUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;




@Controller
@RequestMapping(value = "upload")
public class UploadController{
    /**
     * 日志记录.
     */
    private static final Logger logger =  LoggerFactory.getLogger(UploadController.class);
    
    @RequestMapping("/showUploadhtml")
    @ResponseBody
    public ModelAndView showUploadhtml() {
        return new ModelAndView("upload/fileupload");
    }


    @RequestMapping(value = "/upload", method = { RequestMethod.POST, RequestMethod.GET })
    @ResponseBody
    public double upload(MultipartFile file,  String chunks,  String chunk,
             String name, String size, String lastModifiedDate, HttpServletRequest request, HttpServletResponse response) throws Exception {
        try {
            if (null != file) {
                long mStartTime = System.currentTimeMillis();
                //判断上传的文件是否被分片（小于1M的不会分片）
                if(null == chunks && null == chunk){
                    File destTempFile = new File(getTempFilePath1(), name);
                    file.transferTo(destTempFile);
                    destTempFile.createNewFile();
                    long size1 = destTempFile.length();
                    long mEndTime = System.currentTimeMillis();
                    double speed = Long.parseLong(size)/((mEndTime - mStartTime)*1024);
                    double speed1 = 1014/((mEndTime - mStartTime));
                    
                    System.out.println(new Date(mEndTime)+""+new Date(mStartTime));
                    System.out.println(mEndTime - mStartTime);
                    System.out.println("size:"+size+"   start time:"+mStartTime+"     end time:"+mEndTime+"    speed:"+speed);
                    System.out.println("size:"+size1+"   start time:"+mStartTime+"     end time:"+mEndTime+"    speed:"+speed1);
                    System.out.println();
                    return speed;
                }
                
                String tempFileDir = getTempFilePath()  + File.separator + name;
                File parentFileDir = new File(tempFileDir);
                if (!parentFileDir.exists()) {
                    parentFileDir.mkdirs();
                }
                File f = new File(tempFileDir + File.separator+ name + "_" + chunk + ".part");
                file.transferTo(f);
                f.createNewFile();
                long size1 = f.length();
                long mEndTime = System.currentTimeMillis();
                double speed = Long.parseLong(size)/((mEndTime - mStartTime)*1024);
                double speed1 = 1014/((mEndTime - mStartTime));
                
                System.out.println(new Date(mEndTime)+""+new Date(mStartTime));
                System.out.println(mEndTime - mStartTime);
                System.out.println("size:"+size+"   start time:"+mStartTime+"     end time:"+mEndTime+"    speed:"+speed);
                System.out.println("size:"+size1+"   start time:"+mStartTime+"     end time:"+mEndTime+"    speed:"+speed1);
                System.out.println();
                // 是否全部上传完成
                // 所有分片都存在才说明整个文件上传完成
                boolean uploadDone = true;
                for (int i = 0; i < Integer.parseInt(chunks); i++) {
                    File partFile = new File(tempFileDir, name + "_" + i + ".part");
                    if (!partFile.exists()) {
                        uploadDone = false;
                        return speed;
                    }
                }
                // 所有分片文件都上传完成
                // 将所有分片文件合并到一个文件中
                if (uploadDone) {
                    synchronized (this) {
                        File destTempFile = new File(getTempFilePath1(), name);
                        for (int i = 0; i < Integer.parseInt(chunks); i++) {
                            File partFile = new File(tempFileDir, name + "_" + i + ".part");
                            FileOutputStream destTempfos = new FileOutputStream(destTempFile, true);
                            FileUtils.copyFile(partFile, destTempfos);
                            destTempfos.close();
                        }
                        FileUtils.deleteDirectory(parentFileDir);
                    }
                }
                return speed;
            }
         
        } catch (Exception e) {
            logger.error("upload file failure :",e);
        }
        return 0;
    }
    
    private String getTempFilePath() {
        return "h:\\filetemp";
    }
    
    private String getTempFilePath1() {
        return "h:\\filetemp1";
    }
}

html

<link rel="stylesheet" type="text/css" th:href="@{../css/upload/upload.css}"/>
  <link rel="stylesheet" type="text/css" th:href="@{../lib/webuploader/webuploader.css}"/>
  <div class='cloudos-fileupload-page'>
  <!--页面头部-->
  <div class="row">
  <div class="col-xs-12">
  <h3>文件上传</h3>
  </div>
  <div class="col-xs-6">
  <div class="btns">
  <div id="picker">选择文件</div>
  <button id="uploadctlBtn" class="btn btn-primary">开始上传</button>
  <button id="stopctlBtn" class="btn btn-primary">暂停上传</button>
  </div>
  </div>
  
  <!--用来存放文件信息-->
  <div id="thelist" class="uploader-list col-xs-7"></div>
  
  <div class="col-xs-5">
  <div class="row">
  <div id="error-list" class="col-xs-12"></div>
  <div id="success-list" class="col-xs-12"></div>
  </div>
  </div>
  </div>
  </div>
  <script th:src="@{../lib/webuploader/webuploader.js}"></script>
  <script th:src="@{../js/upload/upload.js}"></script>

// 文件上传
jQuery(function() {
    var $ = jQuery,
    $list = $('#thelist'),
    $btn = $('#uploadctlBtn'),
    $stopctlBtn = $('#stopctlBtn'),
    /* state = 'pending',*/
    uploader;


    uploader = WebUploader.create({


        // 不压缩image
        resize: false,


        // swf文件路径
        swf:'/lib/webuploader/Uploader.swf',


        // 文件接收服务端。
        server: '/upload/upload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        dnd: '#thelist',
        chunked:true,
        chunkSize:1024*1024,
        chunkRetry:false
    });


    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<div id="' + file.id + '" class="item row">' +
            '<div class="col-xs-3" >' + file.name + '</div>' +
            '<div class="col-xs-4" ><div class="progress progress-striped active"><div class="progress-bar" role="progressbar" style="width: 0%"><span></span></div></div></div>'+
            '<div class="col-xs-2" ><p class="state">等待上传...</p></div>' +
            '<div class="col-xs-2" ><span class="retry">重试</span><span class="stop"></span><span class="cancel">取消</span></div>' +
            '</div>' );
    });


    function getFilesInfo (id,file,uploadStates){
        var stateMsg;
        if (uploadStates){
            stateMsg = '上传成功';
        }else{
            stateMsg = '上传失败';
        }
        $('#'+id).append('<div id="' + file.id + '" class="item row">' +
            '<div class="col-xs-12 " >' + file.name + '<span></span></div>' +
            '</div>' );
        $('#'+id+' #'+file.id).find('span').text(stateMsg);
    }




    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
     $percent =  $('#'+file.id).find('.progress .progress-bar');
     $( '#'+file.id ).find('p.state').text('上传中');
     $percent.css( 'width', percentage * 100 + '%' );
     $percent.find('span').text( percentage.toFixed(2) * 100 + '%' );
 });




    //上传成功
    uploader.on( 'uploadSuccess', function( file ) {
     $( '#'+file.id ).find('p.state').text('上传成功');
     $( '#'+file.id ).find('.progress-bar').css( 'background-image', "none" );
     $( '#'+file.id ).find('.cancel').remove();
     $( '#'+file.id ).find('.stop').remove();
     getFilesInfo('success-list',file,true);
 });




    //上传失败
    uploader.on( 'uploadError', function( file ) {
       $('#'+file.id).find('.retry').css('display',"block");
       $percent =  $('#'+file.id).find('.progress .progress-bar');
       $( '#'+file.id ).find('p.state').text('上传出错');
       $( '#'+file.id ).find('.progress-bar').css( 'width', 0 + '%' );
       $percent.find('span').text('0%');
       $( '#'+file.id ).find('.cancel').remove();
       $( '#'+file.id ).find('.stop').remove();
       getFilesInfo('error-list',file,false);
       retry(file);
   });


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




var flag = true;
uploader.onFileQueued = function( file ) {
    $('#'+file.id).find('.cancel').on( 'click', function() {
        uploader.removeFile( file ,true);
    });
    $('#'+file.id).find('.stop').on( 'click', function() {
        if(flag){
          uploader.stop(file);
          $('#'+file.id).find('.stop').text('继续上传');
          flag = false;
      }else{
       uploader.upload(file);
       $('#'+file.id).find('.stop').text('暂停上传');
       flag = true;
   }
});
}


$btn.on( 'click', function() {
    uploader.upload();
    $('#thelist').find('.stop').text('暂停上传');
    flag = true;
});


$stopctlBtn.on( 'click', function() {
    uploader.stop(true); 
    $('#thelist').find('.stop').text('继续上传');
    flag = false;
});


function retry (file){
    $('#'file.id).find('.retry').on('click',function(){
        uploader.retry(file);
    })
}


    //负责view的销毁
    uploader.onFileDequeued = function( file ) {
      $( '#'+file.id ).off().find('.cancel').off().end().remove();
  };


  uploader.uploadComplete = function( file ){
    uploader.upload();
}


});