一、今天完成的事：

1.终于把图片上传写完了，实现点击上传，生成图片预览，加载滚动条和状态；

2.实现删除功能，点击删除将列表清空；

二、明天的计划：

1.优化图片上传，添加验证；

三、遇到的问题：

1.图片上传的时候，点击上传一直报错，不清楚到底应该发送什么，接口文档写的是发送file文件。类型是MultipartFile，一直以为是把图片转化为二进制文件传输到后台，但是一直报错，更改发送类型和方式后，原来是定义发送的文件名是file，类型是input框中的图片的数据；

2.图片上传成功后，发现url回复正常，但是html页面用ng-src无法显示图片，而且进度条无法显示，查看资料后发现是需要用apply函数检查一下；

四、收获：

1、终于自己完成了图片上传功能，对接口文档理解不透彻，导致传输的时候一直报错；

//创建FormData()对象
var fd = new FormData();
// //文件对象 file
fd.append("file", $scope.file[0]);
//准备使用ajax上传

xhr.open("post", "/carrots-admin-ajax/a/u/img/task", true);
xhr.send(fd);

2。显示进度条这块是个难点，但是方法简单，直接调用函数即可；

主要是查看ajxa的progress时间和html的addEventListener时间及参数的使用；

xhr.upload.addEventListener("progress", function (evt) {
    //evt.loaded：文件上传的大小   evt.total：文件总的大小
    console.log(evt.loaded);
    //进度条显示
    $scope.progress = Math.round((evt.loaded) * 100 / evt.total);
    console.log($scope.progress);
}, false);

获取到实时变化的数据后，赋值给ng-style的参数，让其根据bootstrap的样式显示；

<div class="progress-bar" role="progressbar" ng-style="{ 'width': progress + '%' }"></div>

3.在参数传输成功的时候，直接用ng-src给图片赋值，会无法显示，需要放在apply中赋值，一直检测src的变化并赋值；

if (jsons.code === 0) {
    $scope.$apply(function () {
        $scope.src = jsons.data.url;
        if (!!$scope.src) {
            $scope.show = true;
        }else {
            $scope.hidden = true;
        }
    });

赋值成功后，根据!!$scope.src来显示图片的状态

4、删除功能的时候，只需要将本地文件列表清空即可，因为没有跟后来交互存储当前图片的信息；

$scope.removeFile = function () {
    $scope.file = "";
    $scope.src = "";
    $scope.progress = 0;
    $scope.show = false;
    $scope.hidden = false;
}