今天完成的事情：

上传图片插件

明天计划的事情：

继续做

遇到的问题：

收获：

app.directive('ngThumb', ['$window', function($window) {
    var helper = {
        support: !!($window.FileReader && $window.CanvasRenderingContext2D),
        isFile: function(item) {
            return angular.isObject(item) && item instanceof $window.File;
        },
        isImage: function(file) {
            var type =  '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
        }
    };

直接把插件的代码拿过来然后运行，也没有什么大问题，

return {
    restrict: 'A',
    template: '<canvas/>',
    link: function(scope, element, attributes) {
        if (!helper.support) return;

        var params = scope.$eval(attributes.ngThumb);

        if (!helper.isFile(params.file)) return;
        if (!helper.isImage(params.file)) return;

        var canvas = element.find('canvas');
        var reader = new FileReader();

        reader.onload = onLoadFile;
        reader.readAsDataURL(params.file);

        function onLoadFile(event) {
            var img = new Image();
            img.onload = onLoadImage;
            img.src = event.target.result;
        }

        function onLoadImage() {
            var width = params.width || this.width / this.height * params.height;
            var height = params.height || this.height / this.width * params.width;
            canvas.attr({ width: width, height: height });
            canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
        }
    }
};

它这个主要是选择应该文件后然后return一个模块，用来预览显示，然后上传的时候有点击事件2

可以中途取消上传时，然后有一个删除按钮，然后更新到html上面，HTML显示出来

最后我在修改一部分为中文。

主要问题在上传上面发送请求，因为网上拿下来的插件url本地是不能用的，是要用你自己的服务器连接

var uploader = $scope.uploader = new FileUploader({
    url: 'carrots-admin-ajax/a/u/img/img',
});
uploader.onSuccessItem = function(fileItem, response, status, headers) {
    console.info('onSuccessItem', fileItem, response, status, headers);
    console.log(response.data.url);
    $scope.uploaderimg=response.data.url
};

发送一个简单的请求，只需要改变一下url什么都不需要添加就可以了，

然后用它插件的代码打印出来我需要的东西，图片的地址，然后更新到本地，最后

显示到我的本地预览上面，用ng-src，添加图片地址，好处是代码没有运行图片不会显示

所以方便。