前言
在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。
本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。
本文参考网道，总结而来。另外，强烈推荐网道，可以去网道的官方看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。
FileList 对象
FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。
input 标签，将type设为file，之后得到的files属性就是一个FileList对象。
// html
<input type="file" accept="image/*" id="fileDiv" />
// js
var fileInput = document.getElementById('fileDiv');
var fileListObj = fileInput.files;
console.log(fileListObj instanceof FileList); // true
console.log(fileListObj.length); // 0
Blob 对象
blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于操作二进制文件，arraybuffer用于操作内存。
blob 对象拥有2个属性和1个方法，分别是size、type属性和slice()方法。
File 对象
File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。
FileList 对象中的每一项都是File 对象。
拿到File 对象之后就要进行操作，下面是操作。
URL 对象
URL.createObjectURL(file) 允许为File 对象创建一个临时链接，
// 例如我们可以在选中了图片之后，展示到页面上
// html
<input type="file" accept="image/*" id="fileDiv" onchange="getFile(this.files[0])" />
<img id="myimg" />
// js
function getFile(file){
var urlObj = URL.createObjectURL(file);
var myimg = document.getElementById('myimg');
myimg.src = urlObj;
console.log(urlObj);
}
/**
* 输出如下：
* blob:http://127.0.0.1:8848/1410c491-27e2-47fa-8198-1d1ea4eece46
*/
FileReader 对象
FileReader 对象的属性和方法比较多，属性中比较重要的是result，方法中比较重要的是
- readAsText(file[,code]) 将文件读取成为文本数据，第二个参数默认采用utf-8编码，返回到FileReader的result属性中
- readAsArrayBuffer(file) 将文件读取成为内存数据，返回到FileReader的result属性中
- readAsBinaryString(file) 将文件读取成为原始二进制数据，返回到FileReader的result属性中
- readAsDataURL(file) 将文件读取成为base64字符串，返回到FileReader的result属性中
// 例如，将文件读取为base64数据，赋值给Img.src属性
// html
<input type="file" accept="image/*" id="fileDiv" onchange="getFile(this.files[0])" />
<img id="myimg" />
// js
function getFile(file){
var myimg = document.getElementById('myimg');
var reader = new FileReader();
reader.onload = function(){
myimg.src = reader.result;
}
reader.readAsDataURL(file);
}
FileReader 对象的所有属性和方法可以参考这里,这里就不再列出来了。
FormData 对象
在早期的互联网时候，提交数据都是用表单。表单提交数据有些缺陷，例如无法校验表单数据，会刷新整个页面等。随着Ajax的兴起，页面表单提交数据慢慢退出历史舞台，但有时上传文件时我们偶尔会用到表单提交数据。
在调用构造函数new FormData(form)构造formdata对象时需要传入form节点，如果不传入，则默认构建空表单。如果传入，则按照key=value的时候构建表单。
// html
<form id="myform">
<input name="username" type="text" placeholder="请输入用户名" />
<br />
<br />
<input name="password" type="password" placeholder="请输入密码" />
<br />
<br />
<input name="age" type="number" placeholder="请输入年龄" />
</form>
<br />
<input type="button" value="创建表单" id="mybtn" />
// js
var btn = document.getElementById('mybtn');
btn.onclick = function(){
var formNode = document.getElementById('myform');
var formdata = new FormData(formNode);
for(var pair of formdata.entries()){
console.log(pair[0] + ': ' + pair[1]);
}
}
可以看看效果图
formdata.png
FormData 对象主要的方法有：
- get(key) 返回指定key的键值
- getAll(key) 返回指定key的所有键值，如果有多个的话。(注意: set()方法会覆盖同名键值对，append()方法则不会覆盖)，返回值是1个数组
- set(key, value) 设置键值对
- delete(key) 删除键值对
- append(key, value) 在formdata对象后边添加键值对，如果第二个参数是文件，还可以使用第三个参数，表示文件名。
- has(key) 返回布尔值，表示是否具有该键名的键值对。
- keys() 返回一个遍历器对象，用于for...of循环遍历所有的键名。
- values() 返回一个遍历器对象，用于for...of循环遍历所有的键值。
- entries() 返回一个遍历器对象，用于for...of循环遍历所有的键值
总结
这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单的内容。
其实这里应该还有用cavas压缩图片的内容是和这部分内容相关，后面有空补充。
网友评论