file-upload - AngularJS 的文件 uploader 集成

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，describe the problem以及迄今为止已采取哪些措施来解决该问题。

已关闭10 年前。

Improve this question

是否有一个好的文件 uploader 与 AngularJS 具有良好的集成(指令)？

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

有人可能会说，使用现有的 uploader 并将其集成到 AngularJS 中很容易 - 对此我会说:如果它很容易，那么有人应该已经做到了。

Answer 1

我实际上曾经推出过自己的 uploader ...但只是因为我不喜欢任何已经制作的 JQuery uploader 。不幸的是，这是专有的，我无法将其发布到互联网上...但是...我可以向您展示如何使用 Angular 中的几乎任何 JQuery 插件:

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 中非常容易地工作。当您想要保持依赖注入(inject)处于事件状态以便保持 Angular 应用程序可测试时，唯一的棘手问题就出现了。 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 的一个技巧，顺便说一句...对于 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 看起来像您想要的任何内容。