JavaScript文件获取与提交

    在前端开发的过程中，我们可能需要用到文件选择、文件处理、文件生成以及文件提交相关的功能。比如设置头像场景：

        a、选择图片文件

        b、裁剪原图片(通过canvas的绘图功能，本文不展开讲解)

        c、生成裁剪过后的新图片

        d、上传新图片作为头像

一、文件在JavaScript里面的存在形态

    HTML5提供了文件相关的接口（不兼容IE9及以下）:Blob, FileList, File, FileReader类型。

        1、Blob对象表示一个不可变的、原始数据（可以是文件数据、JavaScript数据等）的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。详情见https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

        2、File类继承自Blob类，所以File对象拥有Blob对象的方法和属性，并且扩展出自己的方法和属性。详情见https://developer.mozilla.org/zh-CN/docs/Web/API/File

       FileList是由File对象组成的类数组对象。看如下代码：

        <input type="file" name="file" id="id">

       当选择了一个文件之后(假设选择的是图片img.png)，执行以下JavaScript代码：

       document.getElementById('id').files    //控制台输出：FileList对象：{0: File, length: 1}

       document.getElementById('id').files[0]    //控制台输出： File对象，即我们选择的img.png和图片相关信息组成对象，具体如下：

           {

               lastModified:1497344366388,
               lastModifiedDate:Tue Jun 13 2017 16:59:26 GMT+0800 (中国标准时间),
               name:"img.png",
               size:75566,
               type:"image/png"

           }

        3、FileReader对象提供读取文件的接口。详情见https://developer.mozilla.org/en-US/docs/Web/API/FileReader

        看如下代码：

        filereader = new FileReader();

        filereader.readAsDataURL(document.getElementById('id').files[0]);

        console.log(filereader);    //输出filereader对象，result属性即是读取结果。

        注：FileReader对象有readAsDataURL、readAsBinaryString(IE10和IE11不支持)、readAsArrayBuffer、readAsText四种读取文件的方法，分别对应相应的result结果类型。方法的参数，即读取的文件是Blob或File对象。

        4、如上，可总结得出，文件在JavaScript中存在的形态可以是：Blob对象、File对象、FileList对象和FileReader对象的result属性（有四种格式： DataURL、BinaryString、ArrayBuffer和Text）。

二、文件获取。JavaScript可以通过如下途径获取文件

    1、如上第二小点，通过<input type="file" name="file" id="id">，然后选择文件后，即可在JavaScript中获取文件对象。

    2、HTML5的canvas元素有对应的生成图片文件的接口。看如下代码:

        <canvas id="cvs"></canvas>

        <script type="text/javascript">

            document.getElementById('cvs').toBlob(function(blob){

                console.log(blob);    //输出blob对象

            });

            document.getElementById('cvs').toDataURL();    //输出base64编码的图片文件字符串："data:image/png;base64,iVB..................."

        </script>

    3、ajax请求获取的Blob对象

    4、WebSocket推送的Blob或ArrayBuffer

三、文件上传

    1、传统的表单提交

    2、HTML5的XMLHttpRequest对象新功能配合FormData对象，可实现上传Blob、File和FlieList类型的文件。

    比如使用ajax上传时：

        var formData = new FormData();

        formData.append('file', imgBlob);    //imgBlob是一个Blob对象

        $.ajax({

            url: 'xxxxxxxx',

      processData: false,

      type: 'post',
      dataType: 'json',
      contentType: false,
      data: formData

    })

四、文件在页面内的引用

    URL.createObjectURL方法可以以Blob或File对象作为参数，返回DOMString指向对应的文件对象。如将图片文件的DOMString赋值给img的src属性，即可展示图片。