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

问题描述

是否存在具有良好集成(指令)的 AngularJS 的良好文件上传器?

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

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

解决方案

我实际上已经推出了我自己的上传器一次......但只是因为我不喜欢任何已经制作的 JQuery 的.不幸的是，这是专有的，我不能在互联网上发布它......但是......我可以向你展示如何使用来自 Angular 的任何 JQuery 插件:

<块引用>

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

假设我有一个 jQuery 插件，它通过选择一个 div 并在其上调用 pluginUploadCall() 来工作...

app.directive('myJqueryPluginUploader', function() {返回 {限制:'A'，链接:功能(范围，元素，属性，ctrl){//elem 是一个 jQuery lite 对象//或 jQuery 对象(如果 jQuery 存在).//所以调用你拥有的任何插件.elem.pluginUploadCall();}};});

这是它的使用方法.

Angular 实际上与 jQuery 集成得非常好，因此任何在 jQuery 中工作的插件在 Angular 中都应该很容易工作.当您想让依赖注入保持活动状态时，唯一的技巧就出现了，这样您就可以保持 Angular 应用程序的可测试性.JQuery 不太擅长 DI，因此您可能需要跳过一些障碍.

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

app.directive('customUploader', function(){返回 {限制:'E'，范围: {}，模板:'<div class="custom-uploader-container">将文件拖放到此处<input type="file" class="custom-uploader-input"/><button ng-click="upload()" ng-disabled="notReady">上传</button></div>',控制器:函数($scope，$customUploaderService){$scope.notReady = true;$scope.upload = function() {//scope.files 在下面的链接函数中设置.$customUploaderService.beginUpload($scope.files);};$customUploaderService.onUploadProgress = 函数(进度){//在这里做点什么.};$customUploaderService.onComplete = 函数(结果){//在这里做点什么.};},链接:功能(范围，元素，属性，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++) {//设置范围内的文件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 {位置:相对；宽度:600px；高度:100px；}div.uploadContainer 输入[类型=文件] {可见性:隐藏；位置:绝对；顶部:0；底部:0；左:0；右:0；}

...现在，您在该 div 上放置的任何内容都将在文件上传时真正删除，您可以使 div 看起来像您想要的任何东西.

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

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

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.

解决方案

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:

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.

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();
      }
   };
});

And here's how it would be used.

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

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 });
               }
          });
       }
});

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.

EDIT: 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;
}

... 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屋！