今日完成：

继续任务九，为input=file添加事件，直接获取文件信息；同时完成了图片的上传以及预览图的实现。但是因为一个小bug一直卡着，没调好。头晕脑胀，暂时不做了，看下其它的换换脑子。

明日计划：

完成任务九，开始任务十。同时将任务的相应部分改为自定义的指令。

问题：

今天整体应该是没有遇到太大问题，但是有一个小bug，一直没解决。

图示部分（上传图片的文档信息）由于是动态的，我准备用ng-repeat来做，但是写的ng-repeat一直不能获取到值。

开始我想是因为我首先渲染了页面，然后ng-repeat所需要的值才产生（图片上传之后，这个值才产生），所以表格获取不到值就无法显示。

于是我用jq添加了部分代码，在图片上传后，jq函数再动态生成并插入图示展示信息的表格。

大概代码如下：

$("#table_tittle").after("<tbody><tr><td ng-repeat='x in file_list track by $index'>{{x.name}}</td>" +
    "<td ng-repeat='x in file_list track by $index'>{{x.size + 'kb'}}</td>" +
    "<td></td>" +
    "<td></td>" +
    "<td></td>" +
    "</tr></tbody>");

但是输出的结果确实把angular的表达式{{。。。}}直接当成文本内容来显示了。问了加健，这是因为jq函数里边直接调用angular的表达式是不能起作用的。

然后查了资料，准备用指令来写，通过指令以及$compile服务，实现动态生成元素的动态事件绑定。这时又发现

 ng-repeat='x in file_list track by $index'

中的 file_list没有绑定scpoe。。。 然后我又改回第一次的写法，因为我认为ng-repeat获取值可以是动态的，并不是会因为加载页面以及上传图片这个先后顺序就无法获取值。然而，，，问题一直没有解决。

感觉这个问题挺简单的，但我陷入了这个思维怪圈出不来，干脆放放，换换思路明天再来调整。

目前的代码：

.controller("upload", function ($scope) {
    $scope.file_list= "";
   var file_input=document.getElementById("file_");
    file_input.onchange=function(){
        var reader = new FileReader();
        for(var i=0;i<this.files.length;i++ ){
            var file=this.files[i];
            reader.readAsDataURL(file)
        }
        reader.onload = function(e){
            document.getElementById("file_img").src=e.target.result;
            $scope.file_list= file_input.files;// 存储上传文件信息的数组
            return $scope.file_list;
        };
    };
});

收获：

1.FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。

readAsBinaryString    将文件读取为二进制编码

readAsText                 将文件读取为文本

readAsDataURL          将文件读取为DataURL

abort                           中断读取操作

用 readAsDataURL 就可以完成本任务中 上传图片及预览的功能。

2.Event.target。

 这个属性用于返回最初触发事件的DOM元素，是在jq中的一个属性。之前没注意，今天用了下感觉挺方便。