angularjs 实现 文件拖拽，缩略图显示

成果图：

main-hugeScreen.html

<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="HugeScreenCtrl">
    <!--div ng-controller="HugeScreenCtrl">
    <div class="col w-lg bg-light b-r bg-auto">
        <div class="wrapper-md dker b-b">
            <h3 class="m-n font-thin">选择文件</h3>
        </div>
        <div class="wrapper-md">
            <p>多个文件</p>
            <input type="file" multiple/>
            <p class="m-t-md">单个文件</p>
            <input type="file"/>
        </div>
    </div>
    <div>
        <input type="file" file-model="myFile" multiple/>
        <button ng-click="uploadFile()">upload me</button>
    </div>
</div-->
    <div class="col w-lg bg-light b-r bg-auto">
        <div class="wrapper-md dker b-b">
            <h3 class="m-n font-thin">Select files</h3>
        </div>
        <div class="wrapper-md">
            <div ng-show="true" class="m-b-md">
                <!-- 3. nv-file-over uploader="link" over-class="className" -->
                <div file-dropzone="[image/png, image/jpeg, image/gif]"
                     files="myFile" over-class='b-danger' data-max-file-size="3" class="b-a b-2x b-dashed wrapper-lg bg-white text-center m-b">
                    Base drop zone
                </div>

                <!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
                <div>
                    <div file-dropzone="[image/png, image/jpeg, image/gif]"
                         files="myFile"  over-class='b-info' data-max-file-size="3" active="redColorActive" class="b-a b-2x b-dashed wrapper-lg lter text-center" >
                        Another drop zone with its own settings
                    </div>
                </div>
            </div>

            <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
            <p>Multiple</p>
            <input type="file" file-model="myFile" multiple/>

            <p class="m-t-md">Single</p>
            <input type="file" file-model="myFile"/>
        </div>
    </div>
    <div class="col">
        <div class="wrapper-md bg-light dk b-b">
            <span class="pull-right m-t-xs">Queue length: <b class="badge bg-info">{{myFile.length}}</b></span>
            <h3 class="m-n font-thin">Upload queue</h3>
        </div>
        <div class="wrapper-md">
            <table class="table bg-white-only b-a">
                <thead>
                <tr>
                    <th width="30%">缩略图</th>
                    <th width="30%">Name</th>
                    <th ng-show="true">Size</th>
                    <th ng-show="true">Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in myFile">
                    <!--td><img ng-src={{item.stream}}/></td-->
                    <td><img ng-src={{item.stream}} style="max-width: 200px; max-height: 200px"/></td>
                    <td><strong>{{ item.file.name }}</strong></td>
                    <td ng-show="true" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                    <td ng-show="true">
                        <div class="progress progress-sm m-b-none m-t-xs">
                            <div class="progress-bar bg-info" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span ng-show="item.isSuccess" class="text-success"><i class="glyphicon glyphicon-ok"></i></span>
                        <span ng-show="item.isCancel" class="text-warning"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span ng-show="item.isError" class="text-danger"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-default btn-xs" ng-click="item.upload(item)" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                            Upload
                        </button>
                        <button type="button" class="btn btn-default btn-xs" ng-click="removeItem($index)">
                            Remove
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div>
                <div>
                    <p>Queue progress:</p>
                    <div class="progress bg-light dker" style="">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" ng-style="{ 'width': allprogress   + '%' }"></div>
                    </div>
                </div>
                <button type="button" class="btn btn-addon btn-success" ng-click="uploadAllfiles(allprogress)">
                    <i class="fa fa-arrow-circle-o-up"></i> Upload all
                </button>
                <button type="button" class="btn btn-addon btn-warning" ng-click="cancelAll()" ng-disabled="!myFile.isUploading">
                    <i class="fa fa-ban"></i> Cancel all
                </button>
                <button type="button" class="btn btn-addon btn-danger" ng-click="clearQueue()" ng-disabled="!myFile.length">
                    <i class="fa fa-trash-o"></i> Remove all
                </button>
                <p class="text-muted m-t-xl">Note: upload.php file included, files will be uploaded to "src/js/controllers/uploads".</p>
            </div>
            <div>
                <table><thead><tr><th>缩略图</th></tr></thead><tbody>
                <tr ng-repeat="item in image track by $index">
                <td>
                    <img ng-src={{item}} />
                </td>
                </tr>
                </tbody></table>

               <!-- <span class="file-name">{{imageFileName}}</span>-->
            </div>
        </div>
    </div>
</div>

bjt-imageload-service.js

/**
 * Created by chaiqiaozhen on 10/6/15.
 */
app.service('fileReader', function ($q) {

    var fileReader = this;
        fileReader.onLoad = function(file, reader,deferred, scope) {
            return function () {
                scope.$apply(function () {
                    var ret = {
                        srcfile: file,
                        stream: reader.result
                    };
                    deferred.resolve(ret);
                });
            };
        };

    fileReader.onError = function (reader, deferred, scope) {
            return function () {
                scope.$apply(function () {
                    deferred.reject(reader.result);
                });
            };
        };

    fileReader.onProgress = function(reader, scope) {
            return function (event) {
                scope.$broadcast("fileProgress",
                    {
                        total: event.total,
                        loaded: event.loaded
                    });
            };
        };

    fileReader.getReader = function(file,deferred, scope) {
            var reader = new FileReader();
            reader.onload = fileReader.onLoad(file, reader,deferred, scope);
            reader.onerror = fileReader.onError(reader, deferred, scope);
            reader.onprogress = fileReader.onProgress(reader, scope);
            return reader;
        };

    fileReader.readMyAsDataURL = function (file, scope) {
            var deferred = $q.defer();

            var reader = fileReader.getReader(file, deferred, scope);
            reader.readAsDataURL(file);

            return deferred.promise;
        };

    });

hugeScreen-service.js

app.directive('fileDropzone', ['$bjtHttpService','fileReader',function($bjtHttpService,fileReader) {
    return {
        restrict: 'A',
        scope: {
            files: '=',
            overClass: '='
        },
        link: function(scope, element, attrs) {
            var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes,getDataTransfer,addfile;
            var fileList = [];
            addfile = function(item){
                fileList[fileList.length] = item;
            }
            getDataTransfer = function(event) {
                var dataTransfer;
                return dataTransfer = event.dataTransfer || event.originalEvent.dataTransfer;
            };
            processDragOverOrEnter = function(event) {
                if (event != null) {
                    event.preventDefault();
                }
                getDataTransfer(event).effectAllowed = 'copy';
                element.addClass(attrs.overClass);

              //  console.log(element);
                return false;
            };
            validMimeTypes = attrs.fileDropzone;
            checkSize = function(size) {
                var _ref;
                if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
                    return true;
                } else {
                    alert("File must be smaller than " + attrs.maxFileSize + " MB");
                    return false;
                }
            };
            isTypeValid = function(type) {
                if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
                    return true;
                } else {
                    alert("Invalid file type.  File must be one of following types " + validMimeTypes);
                    return false;
                }
            };
            element.bind('dragover', processDragOverOrEnter);
            element.bind('dragenter', processDragOverOrEnter);
            return element.bind('drop', function(event) {
                var files;
                if (event != null) {
                    event.preventDefault();
                }
                element.removeClass(attrs.overClass);
                fileList = [];
                files = getDataTransfer(event).files;
                for(var i = 0; i < files.length; i++){
                    if(!isTypeValid(files[i].type))
                        return false;
                    if(!checkSize(files[i].size))
                       return false;
                  /*  var reader = new FileReader();
                    reader.onload = function(reader,evt){
                        console.log(reader);
                    };
                    reader.readAsDataURL(files[i]);*/
                  /*  fileReader.readMyAsDataURL(files[i],scope).then(
                        function(ret){
                            console.log(ret);
                    });*/
                   fileReader.readMyAsDataURL(files[i], scope)
                        .then(function(ret) {
                            var file = {
                                isSuccess: false,
                                isCancel: false,
                                isError: false,
                                progress: 0,
                                isReady: false,
                                isUploading: false,
                                file: ret.srcfile,
                                stream: ret.stream,
                                upload: function (item) {

                                    var options = {
                                        headers: {'Content-Type': undefined},
                                        callbackError: function(args,data){
                                            item.isError = true;
                                        },
                                        callbackSuccess: function(args,data){
                                            item.isSuccess = true;
                                            item.progress = 100;
                                            console.log(this.isSuccess);
                                        }
                                    };
                                    var addOptions = {
                                        transformRequest: angular.identity
                                    };
                                    var fd = new FormData();
                                    fd.append('file', this.file);
                                    $bjtHttpService.$post('demo/file/upload',fd,options,addOptions);
                                }
                            };
                            addfile(file);
                        });
                }
                scope.files = fileList;
                return false;
            });
        }
    };
}]);
app.directive('fileModel',  ['$parse', '$bjtHttpService', function ($parse, $bjtHttpService) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
            var filelist = [];
            element.bind('change', function(){
                scope.$apply(function(){
                    for(var i = 0; i < element[0].files.length; i++){
                        var file = {
                            isSuccess: false,
                            isCancel: false,
                            isError: false,
                            progress: 0,
                            isReady: false,
                            isUploading: false,
                            file: element[0].files[i],
                            fileStream: null,
                            upload: function (item) {

                                var options = {
                                    headers: {'Content-Type': undefined},
                                    callbackError: function(args,data){
                                        item.isError = true;
                                    },
                                    callbackSuccess: function(args,data){
                                        item.isSuccess = true;
                                        item.progress = 100;
                                        console.log(this.isSuccess);
                                    }
                                };
                                var addOptions = {
                                    transformRequest: angular.identity
                                };
                                var fd = new FormData();
                                fd.append('file', this.file);
                                $bjtHttpService.$post('demo/file/upload',fd,options,addOptions);
                            }
                        };
                        filelist[i] = file;
                    }

                    modelSetter(scope, filelist);
                });
            });
        }
    };
}]);

app.controller('HugeScreenCtrl', ['$scope', 'fileReader', function($scope, fileReader) {

    $scope.allprogress=0;
    $scope.myFile = '';
    $scope.image= null;
    $scope.imageFileName = '';
    $scope.redColorActive = 'false';//'b-danger';
    $scope.removeItem = function(index){
        $scope.myFile.splice(index, 1);
    };
    $scope.getNotUploadedItems = function () {
        var files = [];
        for(var i = 0, j = 0; i < $scope.myFile.length; i++){
            if(!$scope.myFile[i].isSuccess)
                files[j++] = $scope.myFile[i];
        }
        return files;
    };
    $scope.getImage = function(item){
        fileReader.readMyAsDataURL(item, $scope)
            .then(function(result) {
                return result;
          });
    };
    $scope.uploadAllfiles = function(){
        $scope.allprogress = 0.0;
        console.log($scope.allprogress);

        var percent = 0;
        if($scope.myFile.length > 0)
            percent = 100/$scope.myFile.length;
        console.log(percent);
        for( var i = 0; i < $scope.myFile.length; i++) {
            if($scope.myFile[i].isSuccess)
                $scope.allprogress = $scope.allprogress+ percent;
            else{
                $scope.myFile[i].upload($scope.myFile[i]);
                if($scope.myFile[i].isSuccess)
                    $scope.allprogress = $scope.allprogress+ percent;
            }
            console.log($scope.allprogress);
        }
    };
}]);