前言
在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。
本文中涉及的知识点有：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 对象主要的方法有：
- 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压缩图片
cavas压缩图片其实很简单，无非就是几个步骤：
1、选择图片，判断图片是否大于2M（用File对象的size进行判断，size的单位是字节）；
2、用FileReader对象读取文件成base64,
3、然后创建Image对象，赋值src属性，在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小)；
4、将cavas转成blob，拼在formdata中用ajax上传。
// 选择图片
$("#idcard_reverse_input").change(function (e) {
var loading = weui.loading('上传中...');
// 判断是否大于2M，大于2M需要压缩图片后再上传
var result = e.target.files[0].size > 2*1024*1024;
var fileObj = e.target.files[0]; //上传文件的对象
var reader = new FileReader();
reader.readAsDataURL(fileObj);
reader.onload = function(er) {
var image = new Image()
image.src = er.target.result;
image.onload = function() {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = result?image.width * 0.1:image.width, //动态计算画布大小
imageHeight = result?image.height * 0.1:image.height;
// 将画布缩小为图片的1/10，然后将图片缩小画入画布中，之后到处画布就能达到压缩图片的效果。
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
canvas.toBlob(function(blob){
uploadReverse(blob,loading,true)
},'image/jpeg',0.8)
}
}
});
function uploadReverse(fileObj,loading,isReverse){
var time = new Date().getTime();
var str = 'code=G1&time=' + time;
// fileSecret是个全局变量，是个秘钥
var apisign = md5(fileSecret + str);
// 构造表单数据
var formData = new FormData();
var imgName = isReverse ? 'reverse.png' : 'front.png'
formData.append("file",fileObj,imgName);
formData.append("apisign", apisign);
formData.append("time", time);
formData.append("code", 'G1');
$.ajax({
url : 'http://example.baidu.com/upload',
type:'post',
data: formData,
contentType: false,
processData: false,
success:function(res){
if(res.status != '1'){
weui.alert(res.info);
return ;
}
// 上传成功
},
fail : function(){
weui.alert('上传失败,请重新选择图片上传!')
},
complete:function(){
loading.hide()
}
})
}
总结
这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单的内容。
