拖放事件沒有按預期工作

Question

我想寫一個指令來支持拖動文件上傳，我不想使用任何第三庫。 我找到有關對SO該主題的帖子：

AngularJS file drag and drop in directive

我按照上面的帖子創建plnkr，和我沒有運氣有了它，任何人都可以幫忙指出來什麼的問題我plnkr

http://plnkr.co/edit/C7Vv8d?p=preview

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