文件上传集成angularjs [英] file uploader integration for angularjs

问题描述

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

Does there exist a good file uploader with good integration (a directive) for AngularJS?

我要寻找的东西是很容易的风格，并支持HTML5拖放等。

I am looking for something that is easy to style and supports HTML5 drag and drop etc.

有人可能会说，它很容易使用现有的上传，并将其纳入AngularJS - 到我会说：如果简单的话应该有人已经做到了

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的几种。不幸的是专有的，我不能将它张贴在互联网上......但我可以告诉你如何只使用约从任何角度jQuery插件：

I actually have rolled my own uploader once... but only because I didn't like any of the already made JQuery ones. Unfortunately that's proprietary and I can't post it on the internet... but... I can show you how to use just about any JQuery plugin from Angular:

有人可能会说，它很容易使用现有的上传，并将其纳入AngularJS - 到我会说：如果简单的话应该有人已经做到了

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.

让我们presume我有一个jQuery插件，通过选择一个div，并要求工作 pluginUploadCall（）就可以了...

Let's presume I have a jQuery plugin that works by selecting a div and calling pluginUploadCall() on it...

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>

角实际上与jQuery集成真的很好，这样jQuery中工作的任何插件应该很容易的工作pretty的角度。唯一trickiness来当你想保持依赖注入活的，所以你可以保持你的角应用可测试英寸jQuery是不是DI非常好，所以你可能通过一些跳铁圈。

Angular actually integrates really well with jQuery so any plugins that work in jQuery should work pretty easily in Angular. The only trickiness comes in when you want to keep Dependency Injection alive so you can keep your Angular App testable. JQuery isn't very good at DI, so you may have to jump through some hoops.

如果你想推出自己的，我可以告诉你，我做了这样的事情：

If you wanted to roll your own, I can tell you I did something like this:

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 来发布文件，检查服务器上的进展。

Where $customUploaderService would be a custom service you create with Module.factory() that uses $http to post the files and check the progress on the server.

我知道这是模糊的，我很抱歉这是所有我可以提供，但我希望帮助。

I know that's vague, and I'm sorry that's all I can provide, but I hope that helps.

编辑：拖放文件上传有点CSS的一招，顺便说一句......对于Chrome和FF，你做的是把一个包含分区...然后做这样的事情：

The drag and drop file upload is a bit of a trick of CSS, BTW... for Chrome and FF, what you do is put the in a containing div... then do something like this:

<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看起来像任何你想要的。

... now anything you drop on that div will really be dropped on the file upload, and you can make the div look like whatever you want.

这篇关于文件上传集成angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！