AngularJS 文件拖放指令 [英] AngularJS file drag and drop in directive

问题描述

这个例子几乎完成了我想在 Angular-js 中移植的内容:HTML5 File API.

This example does pretty much what I would like to port in Angular-js: HTML5 File API.

我一直试图在谷歌上搜索一些指令示例，但是我发现旧示例大量使用 DOM 或不是为 Angular 1.0.4 编写的.

I have been trying to google some example of directives however I found old example that do massive use of DOM or are not written for Angular 1.0.4.

基本上就是纯js代码:

Basically this is the pure js code:

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

我能想到的唯一可能的方法是创建一个指令

The only possible way I can think of is creating a directive that does

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)在我修复它之前，我想知道是否存在某些东西或者我是否做得正确，

However (1) it did not work, (2) before I fix it I would like to know if something exists or if I am doing it properly,

非常感谢任何提示或帮助.

Any hint or help is very much appreciated.

推荐答案

要将评论合并为答案，请将 ondrop 更改为 drop，添加 e.stopPropagation()，将holder改为elem.

To consolidate the comments into an answer, change ondrop to drop, add e.stopPropagation(), change holder to 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;
      });
    }
  };
});

我正在做类似的事情，这是我的工作解决方案:

I was doing something similar and here is my working solution:

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>

这篇关于AngularJS 文件拖放指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！