Drop 事件未按预期工作答案

【问题标题】：Drop event did not work as expectedDrop 事件未按预期工作
【发布时间】：2016-02-04 11:53:27
【问题描述】：

我正在尝试编写一个指令来支持文件上传的拖放，我不想使用任何第三个库。我在 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);
                }
            });
        }
    }
});
})();

【问题讨论】：

@cojomojo 你真的看过我的问题吗，我说我根据你刚刚找到的帖子创建了 plnkr

标签： javascript angularjs html angularjs-directive

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

【讨论】：

是的，我忘记绑定 'dragover'、'dragleave' 和 'dragenter'。