成果图：

 

main-hugeScreen.html

     
    
          
      
        
       
            
        
Select files
        
       
        
       
            
        
                
                         
         
                              Base drop zone                
         
                
                         
         
                    
          
            Another drop zone with its own settings 
          
                
         
            
        
            
                    
        
Multiple
            
                    
        
Single
            
                
       
    
      
    
      
        
       
            
        Queue length: {
   {myFile.length}}            
        
Upload queue
        
       
        
       
            
        
                         
                          
            
缩略图
            
Name
            
Size
            
Progress
            
Status
            
Actions
           
                         
                         
                          
                        
            
{ { item.file.name }}
            
{ { item.file.size/1024/1024|number:2 }} MB
            
 
            
 
             
 
            
 
            
    
            
  Upload   Remove  
           
                         
                    
            
        
                
         
                    
          
Queue progress:
                    
          
 
           
 
          
                
         
                
                              Upload all                                
                              Cancel all                                
                              Remove all                                
         
Note: upload.php file included, files will be uploaded to "src/js/controllers/uploads".
            
        
            
        
                
         
缩略图
  
               
                     
        
        
       
    
      
     

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);        }    };}]);