html5FileUploadDemo/Index.html at master · Joney025/html5FileUploadDemo · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .progress {
            height: 20px;
            overflow: hidden;
            background-color: #f5f5f5;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
            box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        }

        .progress-bar {
            float: left;
            width: 0;
            height: 100%;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            background-color: #337ab7;
            -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
            -webkit-transition: width .6s ease;
            -o-transition: width .6s ease;
            transition: width .6s ease;
            text-align: center;
        }

        .progress-text {
            font-size: large;
            text-align: right;
        }
    </style>
</head>
<body>
    <div>
        <div class="jumbotron">
            <input type="file" id="exampleInputFile">
        </div>
        <p>
            <div class="progress">
                <div class="progress-bar" role="progressbar"></div>
            </div>
            <div class="progress-text"></div>
        </p>
    </div>
    <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script>
        $(function () {

            $("#exampleInputFile").change(function (event) {
                var file = $("#exampleInputFile")[0].files[0];
                PostFile(file, 0);
            });

            function PostFile(file, i) {
                var name = file.name, //文件名
                size = file.size, //总大小shardSize = 2 * 1024 * 1024,
                shardSize = 1024 * 1024 * 2,//以2MB为一个分片
                shardCount = Math.ceil(size / shardSize); //总片数
                if (i >= shardCount) {
                    return;
                }
                //计算每一片的起始与结束位置
                var start = i * shardSize,
                end = Math.min(size, start + shardSize);
                //构造一个表单，FormData是HTML5新增的
                var form = new FormData();

                form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
                form.append("lastModified", file.lastModified);
                form.append("name", name);
                form.append("total", shardCount); //总片数
                form.append("index", i + 1); //当前是第几片

                //Ajax提交
                $.ajax({
                    url: "AjaxFile.ashx",
                    type: "POST",
                    data: form,
                    async: true, //异步
                    processData: false, //很重要，告诉jquery不要对form进行处理
                    contentType: false, //很重要，指定为false才能形成正确的Content-Type
                    success: function (data) {
                        if (data) {
                            i = data++;
                            var num = Math.ceil(i * 100 / shardCount);
                            $(".progress-bar").width(num + '%');
                            $(".progress-text").text(num + '%');
                            PostFile(file, i);
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>