File 对象，FileList 对象，FileReader 对象

File 对象

File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。
最常见的使用场合是表单的文件上传控件（），用户选中文件以后，浏览器就会生成一个数组，里面是每一个用户选中的文件，它们都是 File 实例对象。
// HTML 代码如下
// <input id="fileItem" type="file">
var file = document.getElementById('fileItem').files[0];
file instanceof File // true
上面代码中，file是用户选中的第一个文件，它是 File 的实例。 
构造函数
 浏览器原生提供一个File()构造函数，用来生成 File 实例对象。 
new File(array, name [, options])
 File()构造函数接受三个参数。 
array：一个数组，成员可以是二进制对象或字符串，表示文件的内容。
 name：字符串，表示文件名或文件路径。
 options：配置对象，设置实例的属性。该参数可选。
 第三个参数配置对象，可以设置两个属性。 
type：字符串，表示实例对象的 MIME 类型，默认值为空字符串。
 lastModified：时间戳，表示上次修改的时间，默认为Date.now()。
 下面是一个例子。 
var file = new File(
  ['foo'],
  'foo.txt',
    type: 'text/plain',
实例属性和实例方法
 File 对象有以下实例属性。 
File.lastModified：最后修改时间
 File.name：文件名或文件路径
 File.size：文件大小（单位字节）
 File.type：文件的 MIME 类型 
var myFile = new File([], 'file.bin', {
  lastModified: new Date(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.type // ""
上面代码中，由于myFile的内容为空，也没有设置 MIME 类型，所以size属性等于0，type属性等于空字符串。 
File 对象没有自己的实例方法，由于继承了 Blob 对象，因此可以使用 Blob 的实例方法slice()。 
FileList 对象
 
FileList对象是一个类似数组的对象，代表一组选中的文件，每个成员都是一个 File 实例。它主要出现在两个场合。 
文件控件节点（）的files属性，返回一个 FileList 实例。
 拖拉一组文件时，目标区的DataTransfer.files属性，返回一个 FileList 实例。 
// HTML 代码如下
// <input id="fileItem" type="file">
var files = document.getElementById('fileItem').files;
files instanceof FileList // true
上面代码中，文件控件的files属性是一个 FileList 实例。 
FileList 的实例属性主要是length，表示包含多少个文件。 
FileList 的实例方法主要是item()，用来返回指定位置的实例。它接受一个整数作为参数，表示位置的序号（从零开始）。但是，由于 FileList 的实例是一个类似数组的对象，可以直接用方括号运算符，即myFileList[0]等同于myFileList.item(0)，所以一般用不到item()方法。 
FileReader 对象
 
FileReader 对象用于读取 File 对象或 Blob 对象所包含的文件内容。 
浏览器原生提供一个FileReader构造函数，用来生成 FileReader 实例。 
var reader = new FileReader();
FileReader 有以下的实例属性。 
FileReader.error：读取文件时产生的错误对象
 FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。
 FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。
 FileReader.onabort：abort事件（用户终止读取操作）的监听函数。
 FileReader.onerror：error事件（读取错误）的监听函数。
 FileReader.onload：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。
 FileReader.onloadstart：loadstart事件（读取操作开始）的监听函数。
 FileReader.onloadend：loadend事件（读取操作结束）的监听函数。
 FileReader.onprogress：progress事件（读取操作进行中）的监听函数。
 下面是监听load事件的一个例子。 
// HTML 代码如下
// <input type="file" οnchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target.result)
  reader.readAsText(file);
上面代码中，每当文件控件发生变化，就尝试读取第一个文件。如果读取成功（load事件发生），就打印出文件内容。 
FileReader 有以下实例方法。 
FileReader.abort()：终止读取操作，readyState属性将变成2。
 FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例。
 FileReader.readAsBinaryString()：读取完成后，result属性将返回原始的二进制字符串。
 FileReader.readAsDataURL()：读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。对于图片文件，这个字符串可以用于元素的src属性。注意，这个字符串不能直接进行 Base64 解码，必须把前缀data:/;base64,从字符串里删除以后，再进行解码。
 FileReader.readAsText()：读取完成后，result属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例，第二个参数是可选的，表示文本编码，默认为 UTF-8。
 下面是一个例子。 
/* HTML 代码如下
  <input type="file" onchange="previewFile()">
  <img src="" height="200">
function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  reader.addEventListener('load', function () {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
上面代码中，用户选中图片文件以后，脚本会自动读取文件内容，然后作为一个 Data URL 赋值给元素的src属性，从而把图片展示出来。
                    File 对象，FileList 对象，FileReader 对象File 对象File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。最常见的使用场合是表单的文件上传控件（），用户选中文件以后，浏览器就会生成一个数组，里面是每一个用户选中的文件，它们都是 File 实例对象。// HTML 代码如下// &lt;input id="fileItem" type="file"&gt;var fil
				android-formlayout-and-input-field
一个安卓form表单布局库，简化Android表单布局，带InputFieldView支持大部分表单场景。
主要功能集中在InputField控件中，该控件继承自EditText，拥有所有EditText的功能，同时添加了title标题字段，标题可以自定义位置，添加了头和尾部的图标添加，添加了清空功能，添加了验证功能，验证为空盒根据正则表达式验证。可以直接在xml中指定该EditText需要的正则表达式。，FormLayout控件继承自LinearLayout，主要功能是在FormLayout中定义属性，可以同时在FormLayout的类型为InputField的子 view生效。
主要属性：
    <!--input field的扩展属性-->
        <!--title 可以显示在edit的左侧或上侧-->
        <!--titile颜色-->
        <!--title尺寸-->
        <!--把EditText划分为2分 一块区域为title 一块区域为Ed
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
FileReader()是一个构造函数
FilerReader.readAsDataURL() 用于读取文件，是一个异步API
具体使用方法如下：
// 此代码用于将用户选择的文件展示在相应的位置
var file = document.querySelector('#file');
    一、功能实现核心：FileSystemObject 对象
 要在javascript中实现文件操作功能，主要就是依靠FileSystemobject对象。
二、FileSystemObject编程
使用FileSystemObjec...
				[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hYNfSzpQ-1576683821839)(http://images.pingan8787.com/blog/File_FileList_FileReader封面图.png)]
本文首发在我的【个人博客】
更多丰富的前端学习资料，可以查看我的 Github: 《Leo-JavaScript》，内容涵盖数据结构与算...
				在浏览器中操作文件，多数情况下用到的是 File 对象，从<input type='file' />元素获取，进而继续操作(例如将选择的图片展示在页面上，用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.
File 对象继承自 Blob 对象，先看看 Blob 对象。
1. Blob 对象
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。
Blob构造函数 Blob(array[, options])
				前端在下载文件的时候经常会使用到Blob、File、FileReader对象，那么它们到底是干嘛的，怎么使？
一、我们可以通过Blob对象直接来操作二进制文件。后端返给我们文件的内容我们就可以用Blob对象来进行读取。
Blob()构造函数接受两个参数，第一个参数为数组，里面可以是字符串或者者二进制对象，第二个参数表示数据的类型。默认是空字符串。
  let obj = {
        name: "yz",
      let blodb= new Blob([JSON.string
				有个页面，form表单上传文件
 <div class="article" style ="margin-top: 20px;">
    <div class="inputText textRight styWth1">
        <label style="width:150px;">上传附件：</label>
        <div class="inpWrap" style="margin-left:150px;">
				JavaScript创建对象的方式有很多，通过Object构造函数或对象字面量的方式也可以创建单个对象，显然这两种方式会产生大量的重复代码，并不适合量产。接下来介绍七种非常经典的创建对象的方式，他们也各有优缺点。（内容主要来自于《JavaScript高级程序设计》，还参考了一下别人写的文章）
一、工厂模式
function createP...