用于angularjs的文件上传器集成

Question

是否存在一个良好的文件上传器，并且具有良好的AngularJS集成（指令）？

我正在寻找易于样式设置并支持HTML5拖放等功能的东西。

有人可能会说，使用现有的上载器并将其集成到AngularJS中很容易-我会说：如果这很容易，那么有人应该已经做到了。

Answer 1

实际上，我曾经滚动过自己的上载器……但仅是因为我不喜欢任何已经制成的JQuery上载器。不幸的是，这是专有的，我无法在互联网上发布它……但是……我可以向您展示如何使用Angular的几乎所有JQuery插件：

可能有人会说，使用现有的上载器并将其集成到AngularJS中很容易-我会说：如果这很容易，那么有人应该已经做到了。

假设我有一个jQuery插件，可以通过选择一个div并调用pluginUploadCall()它来工作…

app.directive('myJqueryPluginUploader', function() {
   return {
      restrict: 'A',
      link: function(scope, elem, attr, ctrl) {
          // elem is a jQuery lite object
          // or a jQuery object if jQuery is present.
          // so call whatever plugins you have.
          elem.pluginUploadCall();
      }
   };
});

这就是它的用法。

<div my-jquery-plugin-uploader></div>

Angular实际上与jQuery集成得非常好，因此任何在jQuery中工作的插件都应该在Angular中很容易地工作。想要保持DependencyInjection有效，以便使AngularApp处于可测试状态，这是唯一的棘手问题。jQuery在DI方面不是很擅长，因此您可能不得不跳过一些麻烦。

如果您想自己动手，我可以告诉您我做了这样的事情：

app.directive('customUploader', function(){
    return {
       restrict: 'E',
       scope: {},
       template: '<div class="custom-uploader-container">Drop Files Here<input type="file" class="custom-uploader-input"/><button ng-click="upload()" ng-disabled="notReady">Upload</button></div>',
       controller: function($scope, $customUploaderService) {
          $scope.notReady = true;
          $scope.upload = function() {
             //scope.files is set in the linking function below.
             $customUploaderService.beginUpload($scope.files);
          };
          $customUploaderService.onUploadProgress = function(progress) {
             //do something here.
          };
          $customUploaderService.onComplete = function(result) {
             // do something here.
          };
       },
       link: function(scope, elem, attr, ctrl) {
          fileInput = elem.find('input[type="file"]');
          fileInput.bind('change', function(e) {               
               scope.notReady = e.target.files.length > 0;
               scope.files = [];
               for(var i = 0; i < e.target.files.length; i++) {
                   //set files in the scope
                   var file = e.target.files[i];
                   scope.files.push({ name: file.name, type: file.type, size: file.size });
               }
          });
       }
});

您在其中$customUploaderService创建的自定义服务Module.factory()将$http用于发布文件并检查服务器上的进度。

我知道这很模糊，很抱歉我能提供所有这些，但是希望对您有所帮助。

编辑：拖放文件上传是CSS，BTW的一个技巧，对于Chrome和FF，您要做的是将其放入包含div的文件中……然后执行以下操作：

<div class="uploadContainer">Drop Files Here<input type="file"/></div>



div.uploadContainer {
   position: relative;
   width: 600px;
   height: 100px;
}

div.uploadContainer input[type=file] {
   visibility: hidden;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

…现在，您在该div上放置的所有内容实际上都会在文件上传中删除，您可以使div看起来像您想要的任何内容。