Question

我正在尝试构建一个功能，用户可以键入文本区域或将文本文件拖到文本区域，然后将文本区域插入到textarea中。

我找不到任何实现此目的的库。

所以对于初学者来说，我只是想把一个文件拖到textarea并执行一个动作。是否存在用于将文件拖动到元素的角度函数/动作？

Answer 1

我做过与图像相似的事情，但概念应该相同......

我会在元素上使用指令并绑定到拖放事件，然后使用 FileReader.readAsText（）来读取内容（确保检查文件类型以及不是什么）。< / p>

<强> HTML

<div class="drop-zone" plkr-file-drop-zone content="text">
  <textarea>{{text}}</textarea>
</div>

<强> JS

 var app = angular.module('plunker', []);
 app.controller('MainCtrl', function($scope) {
   $scope.text = "";
 })
 .directive('plkrFileDropZone', [function () {
    return {
        restrict: 'EA',
        scope: {content:'='},
        link: function (scope, element, attrs) {

            scope.content = "drop a .txt file here";

            var processDragOverOrEnter;

            processDragOverOrEnter = function (event) {
                if (event !== null) {
                    event.preventDefault();
                }
                event.dataTransfer.effectAllowed = 'copy';
                return false;
            };

            element.bind('dragover', processDragOverOrEnter);
            element.bind('dragenter', processDragOverOrEnter);
            element.bind('drop', handleDropEvent);

            function insertText(loadedFile) {

                scope.content = loadedFile.target.result;
                scope.$apply();
            }

            function handleDropEvent(event) {

                if (event !== null) {
                    event.preventDefault();
                }
                var reader = new FileReader();
                reader.onload = insertText;
                reader.readAsText(event.dataTransfer.files[0]);

            }
        }
    };
}]);

这是一个有效的版本......

Plunker Demo

**我只在Chrome中测试过这个：）

如何使用Angular将文本文件拖动到文本区域以显示内容

1 个答案: