02-文件上传

文件上传

ArrayBuffer对象

表示一段二进制数据，用来模拟内存里面的数据，通过这个对象，JavaScript可以读写二进制数据

构造方法

接收一个参数，表示这段二进制数据占用多少字节

实例属性

属性名	描述
`ArrayBuffer.prototype.byteLength`	返回所分配的内存区域的字节长度

实例方法

属性名	描述
`ArrayBuffer.prototype.slice(start[,end])`	返回 $[start,end)$ 的子`ArrayBuffer`对象

Blob对象

表示一个二进制文件的数据内容，它与 ArrayBuffer的区别在于，它用于操作二进制文件，而 ArrayBuffer用于操作内存

构造方法

参数	描述
第一个参数（必须）	数组，成员是二进制对象或字符串，表示新生成的`Blob`实例对象的内容
第二个参数（可选）	是一个配置对象，只有一个`type`属性表示数据的MIME类型，默认是字符串

实例属性

属性名	描述
`Blob.prototype.size`	返回数据的大小
`Blob.prototype.type`	返回数据的MIME类型

实例方法

属性名	描述
`Blob.prototype.slice([start,end,contentType])`	返回 $[start,end)$ 的子`Blob`对象，起始位置和结束位置默认是0和末尾，`contentType`是数据的`MIME`类型，默认为空字符串

FormData对象

通过脚本的形式填写表单，通过AJAX发送

构造方法

参数	描述
无参	表示空白表单
一个表单元素	会关联这个表单

实例方法

方法名	描述
`FormData.get(key)`	根据键名获取键值，若有多个同名键值对只会返回第一个
`FormData.getAll(key)`	根据键名获取键值对，返回是一个数组，包含所有同名键的键值
`FormData.set(key,value)`	设置键值对，若键名重复会覆盖，若第二个参数是文件，还可以使用第三个参数用来表示文件名
`FormData.append(key,value)`	添加一个键值对，若键名重复会生成两个相同键名的键值对，若第二个参数是文件，还可以使用第三个参数用来表示文件名
`FormData.delete(key)`	根据键名删除一个键值对
`FormData.has(key)`	判断是否具有该键名的键值对
`FormData.keys()`	返回一个迭代器对象，用于迭代所有的键名
`FormData.values()`	返回一个迭代器对象，用于迭代所有的键值
`FormData.entries()`	返回一个迭代器对象，用于迭代所有的键值对

FileList对象

FileList是一个存放File对象的集合，是一个伪数组，最常见的使用场合

文件表单控件<input type="file" multiple>，multiple表示可以多选，该控件的files属性就是用户上传的文件列表，即时没有设置multiple属性只能选择一个文件的情况下，也是一个包含一个元素的FileList集合
拖拽事件中的DataTransfer.files属性，返回一个FileList实例

File对象

一个File对象代表一个文件，存放在FileList集合中

构造方法

参数	描述
第一个参数（必须）	数组，成员是二进制对象或字符串，表示文件内容
第二个参数（必须）	字符串，表示文件名或文件路径
配置对象（可选）	type：MIME类型字符串，默认是空字符串；lastModified：时间戳表示最后修改时间，默认是现在

实例属性

属性名	描述
`File.lastModified`	文件最后修改时间
`File.name`	文件名
`File.size`	文件大小
`File.type`	文件类型

FileReader对象

对象用于读取File对象所包含的文件内容

构造方法

没有参数，只是生成实例

实例属性

状态与结果

属性名	描述
`FileReader.error`	读取文件时产生的错误对象
`FileReader.readyState`	返回一个整数，表示实例对象的状态；0=尚未加载任何数据，1=数据正在加载，2=加载完成
`FileReader.result`	读取完成后的文件内容，有可能是字符串，也可能是一个ArrayBuffer实例

监听函数

属性名	描述
`FileReader.onprogress`	`progress`事件监听函数，读取时持续触发
`FileReader.onabort`	`abort`事件监听函数，用户主动触发（即调用调用`abort()`方法），因为错误中止不会触发
`FileReader.onerror`	`error`事件监听函数，因为错误导致中止时触发
`FileReader.onload`	`load`事件监听函数，读取成功时触发
`FileReader.onloadstart`	`loadstart`事件监听函数，开始读取时触发
`FileReader.onloadend`	`loadend`事件监听函数，读取完成时触发，不管成功或失败

实例方法

方法名	描述
`FileReader.abort(file)`	终止读取操作，`readyState`属性将变成2
`FileReader.readAsArrayBuffer(file)`	以`ArrayBuffer`的格式读取文件，读取完成后`result`属性将返回一个 `ArrayBuffer`实例
`FileReader.readAsBinaryString(file)`	读取完成后，`result`属性将返回原始的二进制字符串
`FileReader.readAsDataURL(file)`	读取完成后，`result`属性将返回一个Base64 编码的字符串，代表文件内容；对于图片文件，这个字符串可以用于`<img />`元素的`src`属性上，由于这种便利性，这个字符串不能直接进行Base64解码，必须把前缀`data:/;base64`从字符串里删除以后，再进行解码
`FileReader.readAsText(file[,encodeing])`	读取完成后，`result`属性将返回文件内容的文本字符串，第二个参数默认是`utf-8`

表单提交文件上传

<form method="post" enctype="multipart/form-data" action="#">
    <!-- 必须设置为post请求方式，而且enctype要设置为multipart/form-data表示混合表单数据 -->
    <input type="file" name="file" multiple />
    <!-- 文件表单控件，multiple表示可以多选 -->
  <input type="submit" name="submit" value="上传" />
  <!-- 提交按钮 -->
</form>

AJAX脚本文件上传

<input type="file" id="file" name="file" multiple />
<!-- 文件表单控件，multiple表示可以多选 -->
<input type="button" id="button" value="上传" />
<!-- 上传按钮 -->
<script>
    var button = document.getElementById("button"); //获取页面上传按钮
    button.addEventListener("click", function (e) { //为上传按钮绑定点击事件
        var file = document.getElementById("file"); //获取页面文件表单控件
        var files = file.files; //获取要上传的文件列表
        if (files.length > 0) { //若选择了文件
            var formData = new FormData();  //创建表单对象
            for (var i = 0; i < files.length; i++) {    //遍历要上传的文件列表
                formData.append("files", files[i], files[i].name);
              //放入文件表单对象中，不能使用set()方法因为会被覆盖掉
            }
            // console.log(formData.getAll("files"));   //可用此语句打印调试表单对象中是否有文件列表
        }
        var xhr = new XMLHttpRequest(); //创建XMLHttpRequest实例
        xhr.open('POST', '/up', true);  //设置请求行
        xhr.onload = function () {  //绑定上传成功时的回调
            if (xhr.status !== 200) {   //若响应状态码不是200
                console.err("上传失败");
            }
        };
        xhr.send(formData); //发送表单对象
    })
</script>

也可以直接发送文件，但是仅限一个文件

<input type="file" id="file" name="file" />
<!-- 文件表单控件，multiple表示可以多选 -->
<input type="button" id="button" value="上传" />
<!-- 上传按钮 -->
<script>
    var button = document.getElementById("button"); //获取页面上传按钮
    button.addEventListener("click", function (e) { //为上传按钮绑定点击事件
        var file = document.getElementById("file").files[0]; //获取页面文件表单控件
        // console.log(file); //可用此语句打印调试是否有文件
        if (file != null) { //若选中文件
            var xhr = new XMLHttpRequest(); //创建XMLHttpRequest实例
            xhr.open('POST', '/up', true); //设置请求行
            xhr.setRequestHeader('Content-Type', file.type);    //设置请求头中发送的文件类型为当前文件类型
            xhr.onload = function () { //绑定上传成功时的回调
                if (xhr.status !== 200) { //若响应状态码不是200
                    console.err("上传失败");
                }
            };
            xhr.send(file); //发送文件对象
        }

    })
</script>