今天完成的事情：

学习了HTML5 input:file类型控制和FileReader对象的方法。我们可以使用form+input来上传文件。

input文件上传标签，div包裹的img标签为图片预览区域，在预览区域能预览上传的图片并成功上传。

控制器中定义了一个UploaderController，该控制器在其作用域中定义了getFile()方法，

getFile方法中调用了fileReader service中的readAsDataUrl方法，此方法中生成了图片的地址url，

并将结果返回getFile中，将返回的url赋值给$scope.imageSrc ，根据Angular双向数据绑定的机制，

img元素中ng-src属性值为url，那么就可以在页面上预览图片了。

明天计划的事情：

继续进行任务9，听雪峰说高程那本书上有用的到的东西，好久没看过这本书了。

遇到的问题：

今天相博的小课堂讲的是表单验证，有html5的验证，各种组件的验证，还有angularjs的ng-message等方法。

还介绍了京东的实时验证、亚马逊的最后提交时验证和输入框失焦时验证这三种不同的验证思路。个人感觉京东的方法比较好，反馈最为及时，但这种的代码肯定也最复杂，特别是密码安全等级评估这一块儿。而且我们大家当时怎么也想不出亚马逊这个大厂为什么要用这么low的验证方式，也许是美国人思路比较清奇？

收获：

input:file的属性值有以下两个比较常用，

accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开。

multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />

<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。

FileReader通过异步的方式读取文件内容，结果均是通过事件回调获取，下面是一个读取本地txt文件内容的例子：

var input  = document.getElementById("file"); //input file

input.onchange = function(){

    var file = this.files[0];

    if(!!file){

        //读取本地文件，以gbk编码方式输出

        var reader = new FileReader();

        reader.readAsText(file,"gbk");

        reader.onload = function(){

            //读取完毕后输出结果

            console.log(this.result);

        }

    }

}

FileReader提供了四种不同的读取文件的方式

我们知道，img的src属性或background的url属性，可以通过被赋值为图片网络地址或base64的方式显示图片。

在文件上传中，我们一般会先将本地文件上传到服务器，上传成功后，由后台返回图片的网络地址再在前端显示。

通过FileReader的readAsDataURL方法，我们可以不经过后台，直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程，减少服务器端无用的图片资源，代码如下：

var input  = document.getElementById("file");   // input file

input.onchange = function(){

    var file = this.files[0];

        if(!!file){

            var reader = new FileReader();

            // 图片文件转换为base64

            reader.readAsDataURL(file);

            reader.onload = function(){

                // 显示图片

                document.getElementById("file_img").src = this.result;

        }

    }

}