简易文件断点续传

Posted on | In

File、FileReader、Blob与Fromdata对象

File对象：可以用来获取某个文件的信息，还可以用来读取这个文件的内容。File对象是来自用户在一个 <input> 元素上选择文件后返回的FileList对象里，也可以是来自由拖放操作生成的 DataTransfer对象。

所有type为file的input都有一个files属性，里面包含了文件的详细信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file" />
</body>
<script>
    var input = document.getElementById('file');
    input.onchange = function(){
        console.log(input.files[0]);
    }
</script>
</html>

WX20191025-233136@2x

DataTransfer：通过拖放动作，拖动到浏览器的数据。

DataURI对象：允许将一个小文件进行编码后嵌入到另外一个文档里，格式为

1
data:[<MIME type>][;charset=<charset>][;base64],<encoded data>

FileReader 对象：允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

readAsDataURL方法：开始读取指定的Blob对象或File对象中的内容。当读取操作完成时，readyState属性的值会成为DONE，如果设置了onloadend事件处理程序，则调用之。同时，result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .area{
        width: 200px;
        height: 200px;
        border:1px dashed red;
    }
</style>
<body>
    <div id="dropbox" class="dropbox">
        <div class="area">拖动图片到这里</div>
    </div>
    <div id="preview"></div>

    <script type="text/javascript">
        var dropbox = document.querySelector("#dropbox");
        var preview = document.querySelector("#preview");

        dropbox.addEventListener("dragenter", function (e) {
            e.stopPropagation();
            e.preventDefault();
        }, false);

        dropbox.addEventListener("dragover", function (e) {
            e.stopPropagation();
            e.preventDefault();
        }, false);

        dropbox.addEventListener("drop", function (e) {
            e.stopPropagation();
            e.preventDefault();

            var dt = e.dataTransfer;
            var files = dt.files;

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = new RegExp("^image\/");
                if (!imageType.test(file.type)) continue;

                // 填充选择的图片到展示区
                var img = document.createElement("img");
                preview.appendChild(img);

                // 读取File对象中的内容
                var reader = new FileReader();
                reader.onload = (function (aImg) {
                    return function (e) {
                        aImg.src = e.target.result;
                    };
                })(img);
                reader.readAsDataURL(file);
            }
        }, false);
    </script>
</body>
</html>

WX20191025-235237@2x

Blob对象：一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 Blob功能并将其扩展为支持用户系统上的文件。

slice方法：Blob对象的slice方法，将二进制数据按照字节分块，返回一个新的Blob对象。

1
var newBlob = oldBlob.slice(startingByte, endindByte);

FormData对象：用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”，比起普通的ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。

1
2
const formdata = new FormData (form? : HTMLFormElement);
formdata.append(key, value);

实现

涉及技术：HTML5 File API、HTML5 FormData、ES6/7的promise和async/await、Koa、Koa-Router以及Nodejs中的FileSystem、child_process

项目git地址

参考

http://www.hhspace.cn/?p=441