使用dropzone顯示uploadig圖像的進度條

Question

我需要使用進度條在縮略圖中顯示上傳的圖像，我試過Dropzonejs Example，但這裏沒有顯示「進度條」。

angular.module('dropZone', []).controller('dropZoneCtrl',function($scope){ 
}).directive('dropZone', function() { 
    return function(scope, element, attrs) { 
    element.dropzone({ 
     url: "/upload", 
     maxFilesize: 100, 
     paramName: "uploadfile", 
     maxThumbnailFilesize: 5 
    }); 
    } 
}); 

Answer 1

我創建目錄下面的東西臨客，還在修呢

HTML ::

<my-video-widget video-id='mykit' my-selection="1" api-call="upload.php"></my-video-widget> 
<my-video-widget video-id='mykit' my-selection="6" api-call="upload2.php"></my-video-widget> 

JS文件::

angular.module('myWidget', []).directive("myVideoWidget", function() { 
    return { 
    restrict : "E", 
    scope:{ 
     videoId:'@', 
     mySelection:"@", 
     apiCall:'@' 
    }, 
    template: "<form class='dropzone test' action='{{apiCall}}' id='{{mySelection}}'> </form>", 
    controller : function($scope, $element, $attrs) { 
     console.log('mySelection id is ------------->'+ $attrs.mySelection); 
     $scope.dropzoneConfig = { 
      'options': { // passed into the Dropzone constructor 
      'url': ''+$attrs.apiCall, 
      'accept': function(file, done) { 
       console.log('checking acceptance'); 
       if (file.name == "Desert.jpg") { 
       done("Naha, you don't."); 
       } 
       else { done(); } 
      }, 
      // 'maxFiles': 1, 
      }, 

      'eventHandlers': { 

      'error': function (file, xhr, formData) { 
       console.log('Error'); 
      }, 
      'sending': function (file, xhr, formData) { 
      console.log('sending'); 
      }, 
      'success': function (file, response) { 
      console.log('success'); 
      } 
      } 
     }; 

    console.log('$scope.dropzoneConfig----------'+$scope.dropzoneConfig); 
    var config=$scope.dropzoneConfig; 
    var myDropzone = new Dropzone($element[0], config.options); 

     //Write function if you need to add some event after files added 
     myDropzone.on("addedfile", function(file) { 
     console.log('Files Added using ---------->'+$attrs.apiCall); 
     /* Maybe display some more file information on your page */ 
     }); 

    _.each(config.eventHandlers, function (handler, event) { 
      console.log('loop'); 
       myDropzone.on(event, handler); 
      }); 
    }, 
    replace : true, 
    transclude : true, 
    link : function(scope, element, attrs) { 
    }, 
    }; 
})