使用 dropzone 显示上传图片的进度条答案

【问题标题】：Using dropzone show progress bar for uploadig image使用 dropzone 显示上传图片的进度条
【发布时间】：2014-06-09 07:21:03
【问题描述】：

我需要在带有进度条的缩略图中显示上传的图像，我尝试了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
    });
  }
});

【问题讨论】：

标签： javascript angularjs progress-bar dropzone.js

【解决方案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) {
    },
  };
})

【讨论】：