Question

我研究了API，但它非常不合适。试图搜索网络并使用少量示例found进行播放，但它似乎无法处理图像数据。这是一些测试代码：

<input ng-paste='handlePaste($event)'>

和控制器：

    .controller('PasteCtrl', ['$scope', function($scope) { 

      $scope.handlePaste = function(e) {
      console.log("handler", e.clipboardData.items.length);
      for (var i = 0 ; i < e.clipboardData.items.length ; i++) {
          var item = e.clipboardData.items[i];
          console.log("Item type: " + item.type);
          if (item.type.indexOf("image") != -1) {
              console.log("Image paste data");
          } else {
              console.log("Discarding non-image paste data");
          }
      }
  }

    }
])

通过粘贴一些文本，它会报告clipboard.items.length为1，粘贴图像会报告零长度。

它是如何或将来会改变的，还是应该以其他方式处理？

Answer 1

以下作品。经测试：

Chrome v40.0.2214.115
AngularJS v1.3.11

HTML

<input ng-paste="handlePaste($event)" placeholder='paste here'>
<img ng-src="{{imageUrl}}"/> {{ imageUrl }}

JS

.controller("appController", function ($scope){
 $scope.handlePaste = function(e) {
        for (var i = 0 ; i < e.clipboardData.items.length ; i++) {
            var item = e.clipboardData.items[i];
            if (item.type.indexOf("image") != -1) {
                var urlCreator = window.URL || window.webkitURL;
                var imageUrl = urlCreator.createObjectURL( item.getAsFile() );
                $scope.imageUrl = imageUrl;
            } else {
                console.log("Discarding non-image paste data");
            }
        }
    }
});

Answer 2

这对我有用：

$scope.handlePaste = function(e) {
    for (var i = 0; i < e.originalEvent.clipboardData.items.length; i++) {
        var item = e.originalEvent.clipboardData.items[i];
        if (item.type.indexOf("image") != -1) {
            var urlCreator = window.URL || window.webkitURL;
            var imageUrl = urlCreator.createObjectURL(item.getAsFile());
            $scope.imageUrl = imageUrl;
        } else {
            console.log("Discarding non-image paste data");
        }
    }
}

ngPaste处理哪些数据类型？

2 个答案: