AngularJS文件拖放在指令(AngularJS file drag and drop in d

这个例子确实相当多，我想端口角JS什么： HTML5文件API 。

我一直在试图谷歌指令的一些例子，但是我发现老的例子，做大规模使用DOM或者没有为角1.0.4写的。

基本上，这是纯js代码：

var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader available';
}

holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target);
    holder.style.background = 'url(' + event.target.result + ') no-repeat center';
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
};

我能想到的唯一可能的方式是创建一个指令，做

edo.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem) {
      elem.bind('ondrop', function(e){
        e.preventDefault();
        var file = e.dataTransfer.files[0], reader = new FileReader();
          reader.onload = function (event) {
          console.log(event.target);
          holder.style.background = 'url(' + event.target.result + ') no-repeat center';
        };
        console.log(file);
        reader.readAsDataURL(file);

        return false;
      });
    }
  };
});

但（1）它没有工作，（2）之前，我解决它，我想知道的东西存在，或者如果我正确地做这件事，

任何提示或帮助是非常赞赏。

Answer 1:

为了巩固注释到一个答案，改变ondrop到drop ，加上e.stopPropagation()变更holder至elem 。

edo.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem) {
      elem.bind('drop', function(e){
        e.preventDefault();
        e..stopPropagation();
        var file = e.dataTransfer.files[0], reader = new FileReader();
          reader.onload = function (event) {
          console.log(event.target);
          elem.style.background = 'url(' + event.target.result + ') no-repeat center';
        };
        console.log(file);
        reader.readAsDataURL(file);

        return false;
      });
    }
  };
});

我在做相似，这里的东西是我工作的解决方案：

HTML

 app.directive("dropzone", function() { return { restrict : "A", link: function (scope, elem) { elem.bind('drop', function(evt) { evt.stopPropagation(); evt.preventDefault(); 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); } }); } } }); 

 div[dropzone] { border: 2px dashed #bbb; border-radius: 5px; padding: 25px; text-align: center; font: 20pt bold; color: #bbb; margin-bottom: 20px; } 

 <div dropzone>Drop Files Here</div> 

Answer 2:

防止违约事件，并从原来的事件获取文件。 所有这些都可以在指令执行。 你应该通过功能，工作与文件到文件拖放属性。 也同时拖动“拖动”类添加到悬浮窗元件。 鉴于它看起来像这样：

<div file-dropzone on-file-drop="myFunction">This is my dropzone </div>

指示：

function fileDropzoneDirective() {
    return {
        restrict: 'A',
        link: fileDropzoneLink
    };
    function fileDropzoneLink($scope, element, attrs) {
        element.bind('dragover', processDragOverOrEnter);
        element.bind('dragenter', processDragOverOrEnter);
        element.bind('dragend', endDragOver);
        element.bind('dragleave', endDragOver);
        element.bind('drop', dropHandler);

        function dropHandler(angularEvent) {

            var event = angularEvent.originalEvent || angularEvent;
            var file = event.dataTransfer.files[0];
            event.preventDefault();
            $scope.$eval(attrs.onFileDrop)(file);

        }
        function processDragOverOrEnter(angularEvent) {
            var event = angularEvent.originalEvent || angularEvent;
            if (event) {
                event.preventDefault();
            }
            event.dataTransfer.effectAllowed = 'copy';
            element.addClass('dragging');
            return false;
        }

        function endDragOver() {
            element.removeClass('dragging');
        }
    }
}

文章来源: AngularJS file drag and drop in directive