Question

我正在尝试编写一个指令来支持文件上传的拖放，我不想使用任何第三个库。我在SO上找到了关于这个主题的帖子：

AngularJS file drag and drop in directive

我根据上面的帖子创建了一个plnkr，我没有运气，任何人都可以帮助指出我的plnkr的问题

(function(){
var app = angular.module('myApp', []);
app.directive("dropzone", function() {
    return {
        restrict : "A",
        link: function (scope, elem) {
            elem.bind('drop', function(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                window.console.log('listener worked!');
                var files = evt.dataTransfer.files;
                for (var i = 0, f; f = files[i]; i++) {
                    var reader = new FileReader();
                    reader.readAsArrayBuffer(f);

                    reader.onload = (function(theFile) {
                        return function(e) {
                            var newFile = { name : theFile.name,
                                type : theFile.type,
                                size : theFile.size,
                                lastModifiedDate : theFile.lastModifiedDate
                            }

                            //scope.addfile(newFile);
                        };
                    })(f);
                }
            });
        }
    }
});
})();

Answer 1

您已经上传了文件，请参阅console.log(newFile);在控制台中注销

(function() {
  var app = angular.module('myApp', []);
  app.directive("dropzone", function() {
    return {
      restrict: "A",
      link: function(scope, elem) {
        elem.bind('dragover', function(e) {
          e.stopPropagation();
          e.preventDefault();
        });
        elem.bind('dragenter', function(e) {
          e.stopPropagation();
          e.preventDefault();
          scope.$apply(function() {
            scope.divClass = 'on-drag-enter';
          });
        });
        elem.bind('dragleave', function(e) {
          e.stopPropagation();
          e.preventDefault();
          scope.$apply(function() {
            scope.divClass = '';
          });
        });
        elem.bind('drop', function(evt) {
          evt.stopPropagation();
          evt.preventDefault();
          window.console.log('listener worked!');
          var files = evt.dataTransfer.files;
          for (var i = 0, f; f = files[i]; i++) {
            var reader = new FileReader();
            reader.readAsArrayBuffer(f);

            reader.onload = (function(theFile) {
              console.log(theFile);
              return function(e) {
                var newFile = {
                  name: theFile.name,
                  type: theFile.type,
                  size: theFile.size,
                  lastModifiedDate: theFile.lastModifiedDate
                }
                console.log(newFile);
                //scope.addfile(newFile);
              };
            })(f);
          }
        });
      }
    }
  });
})();

丢弃事件没有按预期工作

1 个答案: