这篇随笔主要引用https://juejin.im/post/59598ecf5188250d8d141fff，只用于自己学习，不对外宣传。
FileList 对象和 file 对象
input[type="file"]标签有一个multipe属性，允许用户选择多个文件，FileList对象就是表示用户选择的文件列表。这个列表中的每一个文件就是一个file对象。
file对象属性：
- name:文件名，不包含路径
- type：文件类型。图片类型的文件都会以image/开头，可以由此来限制只允许上传图片
- size:文件大小
- lastModified:文件最后修改时间
<input type="file" id="files" multipe>
<script>
var elem = document.getElementById('files');
elem.onchange = function (event){
var files = event.target.files;
for(var i = 0;i<files.length;i++){
if(files[i].type.indexof('image/')!==-1&&files[i].size<204800){
console.log(files[i].name);
}
}
}
input 中有个 accept 属性，可以用来规定能够通过文件上传进行提交的文件类型。
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">
FileReader 对象
FileReader对象主要用来把文件读入内存，并且读取文件中的数据。通过构造函数创建一个FileReader对象
var reader = new FileReader();
该对象有以下方法：
- abort：中断读取操作
- readAsArrayBuffer:读取文件内容到ArrayBuffer对象中
- readAsBinaryString:将文件读取为二进制数据
- readAsDataURL:将文件读取为data:URL格式的字符串
- readAsText:将文件读取为文本
<input type="file" id="files" accept="image/jpeg,image/jpg,image/png">
<img src="blank.gif" id="preview">
<script>
var elem = document.getElementById('files'),
img = document.getElementById('preview');
elem.onchange = function(){
var files = elem.files,
reader = new FileReader();
if(files && files[0]){
reader.onload = function(ev){
img.src = ev.target.result;
}
reader.readAsDataURL(files[0])
}
}
</script>