Someone will probably say that its easy to use an existing uploader and integrate it into AngularJS – to that i’ll say: if its easy then someone should have done it already.

让我们假设我有一个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中工作。当你想保持依赖注入活动，所以你可以保持你的Angular App可测试的唯一的棘手。 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.
          };
       },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看起来像你想要的。