웹 uploader 큰 파일 분할 업로드

참고:http://fex.baidu.com/webuploader/
사용:
전단 페이지:

$(function(){
/ / upload start
var $list = $('#thelist .table'),
$btn = $('#ctlBtn');
var uploader = WebUploader.create({
크기: false, / / 압축 하지 않 음 이미지
swf: 'asserts / ${appVersion} / lib / webuploader / Uploader. swf', / / swf 파일 경로
server: 'upload BigFileAdd', / 파일 수신 서버.
pick: '\ # picker', / / 파일 을 선택 하 는 단추 입 니 다. 선택 할 수 있 습 니 다.
chunked: true, / 큰 파일 업로드 처리 여부
chunkSize: 10 * 1024 * 1024, / / 분할 업로드, 각 2M, 기본 값 5M
/ / auto: true, / 파일 선택 후 자동 업로드 여부
/ / chunkRetry: 2, / / 네트워크 문제 로 인해 어떤 조각 이 잘못 되면 자동 으로 재 전송 횟수 를 허용 합 니 다.
//runtimeOrder: 'html5,flash',
// accept: {
// title: 'Images',
// extensions: 'gif,jpg,jpeg,bmp,png',
// mimeTypes: 'image/*'
// }
중복 업로드 지원 여부: false / /
});
/ / 대기 열 에 파일 이 추가 되 었 을 때
uploader.on( 'fileQueued', function( file ) {
$list. appeend ('& lt;;; tr id = "' + file. id + '" "클래스 =" file - ite"& gt;;;' + '& lt;;' + '& lt;' + '& lt;' + '& lt;' + '& lt;' + '& lt; td width =" 20% "class=" 파일 크기 "& gt;;;' + (file. size / 10224 / 10224 / 파일 크기 / 파일 크기 / 파일 크기). (1) + 'M' + '+' & lt; / '& lt;' + '& lt;' + '& lt; td 너비 =" 20% "class =" file - 크기 "파일 크기 / 크기 가 크기 / 10224 / 10224 / 24). 해결 해결 해결 (1) +' M '+' + '& &' & lt; / / / lt; 0% & lt; / td & gt; '+' & lt; td class = 'file - status' & lt; 업로드 대기 & lt; / td & gt;' + '& lt; td width =' 20% 'class = "file - manage" & lt; & lt; a class = "stop - btn" href = "javascript:" & lt; 일시 정지 & lt; / a & gt; & lt; a class = "remove - this" href = "javascript:" & lt; 취소 & lt; / a & lt; & lt; '+' & lt; / tr & gt; ');
/ / 올 린 파일 일시 정지
$list.on('click','.stop-btn',function(){
uploader.stop(true);
})
/ / 올 린 파일 삭제
$list.on('click','.remove-this',function(){
if ($(this).parents(".file-item").attr('id') == file.id) {
uploader.removeFile(file);
$(this).parents(".file-item").remove();
}
})
});
/ / 파일 추가 반복
var timer1;
uploader.onError = function(code){
clearTimeout(timer1);
timer1 = setTimeout(function(){
alert ('이 파일 이 이미 존재 합 니 다');
},250);
}
/ / 파일 업로드 중 진행 표시 줄 생 성
uploader.on( 'uploadProgress', function( file, percentage ) {
$("td.file-pro").text("");
var $li = $( '#'+file.id ).find('.file-pro'),
$percent = $li.find('.progress .progress-bar');
/ / 중복 생 성 방지
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active" style="margin-bottom: 0px">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>' + '<div class="per">0%</div>').appendTo( $li ).find('.progress-bar');
}
$li. siblings ('file - status'). text (' 업로드 중 ');
$li.find('.per').text((percentage * 100).toFixed(2) + '%');
$percent.css( 'width', percentage * 100 + '%' );
});
/ / 파일 업로드 성공
uploader.on( 'uploadSuccess', function( file ) {
$('\ #' + file. id). find ('. file - status'). text (' 업로드 됨 ');
$( '#'+file.id ).find('.file-pro').text('100%');
var tb = document. getElement ById ("upload Table"); / / table 쌍 상 가 져 오기
var rows=tb.rows;
for (var i = 0; i & lt; rows. length; i + +) {/ - 모든 줄 을 순환 합 니 다.
var cells=rows[i].cells;
if (cells [3]. innerText = = '업로드 됨') {
cells[2].innerText='100%';
cells[4].innerHTML ='';
}
}
$('#uploadBigFileForm').submit();
});
/ / 파일 업로드 실패, 업로드 오류 표시
uploader.on( 'uploadError', function( file ) {
$('\ #' + file. id). find ('. file - status'). text (' 업로드 오류 ');
});
uploader.on('uploadBeforeSend', function (obj, data, headers) {
var configType=$("#configType option:selected").val();
data.configType= configType;
});
$btn.on('click', function () {
if ($(this).hasClass('disabled')) {
return false;
}
var configType=$("#configType option:selected").val();
$.ajax({
type: "POST",
url: 'uploadBigFileValidate',
data: "configType="+configType,
dataType: 'json',
success: function(obj){
if(obj.success){
/ / 사용자 정의 매개 변수
uploader.options.formData.path=encodeURI(encodeURI(obj.content));
uploader.options.formData.guid = Math.random();
uploader.upload();
}else if(!obj.success){
alert(obj.errorMsg);
return false;
}
}
});
});
})
백 엔 드 - springmvc

    @SuppressWarnings({"rawtypes", "unchecked"})
    @NeedLogin
    @RequestMapping("/uploadBigFileAdd")
    public @ResponseBody String uploadBigFileAdd(MultipartFile file, String guid, Integer chunk, Integer chunks,
        HttpServletRequest request) {

        String fileSavePath = "";
        try {
            fileSavePath = URLDecoder.decode(URLDecoder.decode(request.getParameter("path"), "UTF-8"), "UTF-8");
        } catch (UnsupportedEncodingException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }
        String tmpPath = "";
        String fileName = file.getOriginalFilename();
        UploadFileLog log = new UploadFileLog();
       
        log.setFileName(fileName);
        if (chunk == null && chunks == null) {//          
            long stime = System.currentTimeMillis();
            fileSavePath =
                fileSavePath + File.separatorChar + DateUtils.formatDate(new Date(), DateUtils.FILE_NAME_PATTERN);
            File uploadFile = new File(fileSavePath + File.separatorChar + fileName);
            try {
                FileUtils.copyInputStreamToFile(file.getInputStream(), uploadFile);
            } catch (IOException e) {
                logger.error("IOException 0", e);
            }
            //     
            log.setPath(uploadFile.getAbsolutePath());
            log.setTimes(System.currentTimeMillis() - stime);
            logService.addLog(log);
            return "";
        } else {
            tmpPath = fileSavePath + File.separatorChar + "tmp" + File.separatorChar
                + DateUtils.formatDate(new Date(), DateUtils.FILE_NAME_PATTERN);
            if (chunk == 0) {
                start.set(System.currentTimeMillis());
            }
            //   guid           
            File file2 = new File(tmpPath + File.separatorChar + guid + File.separatorChar + chunk);
            if (!file2.exists()) {
                file2.mkdirs();
            }
            try {
                //        
                file.transferTo(file2);
            } catch (Exception e) {
                logger.error("transferTo Exception ", e);
            }
            //            ，       
            if (chunk == (chunks - 1)) {
                //      ，      
            }

        }

        return "";
    }

 
테스트 결과:
필름 당 5M
파일 크기
업로드 시간
파일 병합 시간
편 수 를 나눈다
136M
1171ms
556ms
28
254M
2109ms
1660ms
51
1.75G
31488ms
26462ms
359
 
조각 당 10M
파일 크기
업로드 시간
파일 병합 시간
편 수 를 나눈다
136M
404ms
295ms 
14
254M
2401ms
1015ms
26
1.75G
28452ms
22866ms
180
 
조각 당 15M
파일 크기
업로드 시간
파일 병합 시간
편 수 를 나눈다
136M
749ms
515ms
10
254M
1857ms
1126ms
17
1.75G
26189ms
22866ms
120