upload/index.html at master · ThinkBlue1991/upload · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="./static/jquery-1.11.1.min.js"></script>
    <script src="./static/bootstrap/js/bootstrap.min.js"></script>
    <script src="./static/webuploader/webuploader.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="./static/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div style="margin:50px 0 0 50px;">
        <div id="picker" style="float:left;">请选择</div>
        <div id="progress" class="progress" style="width:500px;float:left;margin:10px 0 0 20px;">
            <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        var task_id = WebUploader.Base.guid(); // 产生文件唯一标识符task_id
        var uploader = WebUploader.create({
            swf: './static/webuploader/Uploader.swf',
            server: '/file/upload', // 上传分片地址
            pick: '#picker',
            auto: true,
            chunked: true,
            chunkSize: 20 * 1024 * 1024,
            chunkRetry: 3,
            threads: 1,
            duplicate: true,
            formData: { // 上传分片的http请求中一同携带的数据
                task_id: task_id,
            },
        });

        uploader.on('startUpload', function() { // 开始上传时，调用该方法
            $('#progress').show();
            $('.progress-bar').css('width', '0%');
            $('.progress-bar').text('0%');
            $('.progress-bar').removeClass('progress-bar-danger progress-bar-success');
            $('.progress-bar').addClass('active progress-bar-striped');
        });

        uploader.on('uploadProgress', function(file, percentage) { // 一个分片上传成功后，调用该方法
            $('.progress-bar').css('width', percentage * 100 - 1 + '%');
            $('.progress-bar').text(Math.floor(percentage * 100 - 1) + '%');
        });

        uploader.on('uploadSuccess', function(file) { // 整个文件的所有分片都上传成功后，调用该方法
            var data = { 'task_id': task_id, 'filename': file.source['name'] };
            $.get('/file/merge', data);
            $('.progress-bar').css('width', '100%');
            $('.progress-bar').text('100%');
            $('.progress-bar').addClass('progress-bar-success');
            $('.progress-bar').text('上传完成');
        });

        uploader.on('uploadError', function(file) { // 上传过程中发生异常，调用该方法
            $('.progress-bar').css('width', '100%');
            $('.progress-bar').text('100%');
            $('.progress-bar').addClass('progress-bar-danger');
            $('.progress-bar').text('上传失败');
        });

        uploader.on('uploadComplete', function(file) { // 上传结束，无论文件最终是否上传成功，该方法都会被调用
            $('.progress-bar').removeClass('active progress-bar-striped');
        });

        $('#progress').hide();
    });
    </script>
</body>
</html>