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中很容易地工作。当你想让Dependency Injection保持活着时，唯一的棘手就是你可以保持你的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.
          };
       },
       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看起来像你想要的任何东西。

Answer 2

您可以尝试AngularJS.ngUpload。

这是一个不含HTML5的解决方案，它使用不可见的iFrame进行文件上传。由于它不依赖于HTML5，因此它适用于浏览器！

示例代码：

<form action='/server/upload/handler' ng-upload="callbackFunction">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
<div>{{uploadReport}}</div>

任何支持click事件的html元素都可用于提交标有ngUpload指令的表单，只有这些元素必须用 upload-submit css类标记（如下所示）上面的输入[type = submit]。

下面的示例使用样式化的div来提交表单。

<form action='/server/upload/handler' ng-upload="callbackFunction">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <div style="cursor: pointer; padding: 5px" class="upload-submit">Submit</div>
</form>
<div>{{uploadReport}}</div>

您可以让/ server / upload / handler吐出有效的网址，以便 {{uploadReport}} 可用于设置＆lt; img＆gt;的src。标签，像这样：

<img ng-src={{uploadReport}} />

并立即看到上传的图片！

以上示例的ngController是：

var UploadCtrl = function ($scope) {
     $scope.callbackFunction = function(contentOfInvisibleFrame) {
         $scope.uploadReport = contentOfInvisibleFrame;
     }
}

可以在AngularJS应用程序模块中注册ngUpload指令，即：

var mainApp = angular.module('MainApp', ["ngUpload", ...]);

并将其添加到您的文档中：

<html ng-app="MainApp">

</html>

AngularJS.ngUpload在ngController的上下文中工作;这样你就可以在一个ngController中拥有尽可能多的上传者。例如：

<form action='/server/upload/handler' ng-upload="callbackFunction1">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport1}}

<form action='/server/upload/handler' ng-upload="callbackFunction2">
   <!-- other form inputs goes here -->
   <input type="file" name="anotherEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport2}}

服务于：

var UploadCtrl = function ($scope) {
     $scope.callbackFunction1 = function(contentOfInvisibleFrame) {
         $scope.uploadReport1 = contentOfInvisibleFrame;
     }

     $scope.callbackFunction2 = function(contentOfInvisibleFrame) {
         $scope.uploadReport2 = contentOfInvisibleFrame;
     }
}

此指令的基于NodeJS的上传处理程序演示可在http://ng-upload.eu01.aws.af.cm找到。

ASP.Net MVC和NodeJS示例代码可以在项目网站上找到：github.com/twilson63/ngUpload/tree/master/examples

希望这有帮助。

Answer 3

我已经将polyfill的简单/轻角度指令放在一起，用于不支持HTML5 FormData的浏览器：

https://github.com/danialfarid/ng-file-upload

您可以将其他模型对象与文件一起发送到服务器。这是演示页面：

http://angular-file-upload.appspot.com/

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="text" ng-model="myModelObj">
  <input type="file" ngf-select ng-model="files" >
</div>

控制器：

Upload.upload({
    url: 'my/upload/url',
    data: {myObj: $scope.myModelObj},
    file: $scope.files
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  });

Answer 4

如果您想处理多个文件，请尝试使用

来自原作者的

jQuery File Upload Angularjs wrap（blueimp）

我认为到目前为止它是最强大的上传者。

Answer 5

我最近编写了一个支持本机多文件上传的指令。

使用示例：

<lvl-file-upload
    auto-upload='false'
    choose-file-button-text='Choose files'
    upload-file-button-text='Upload files'
    upload-url='http://localhost:3000/files'
    max-files='10'
    max-file-size-mb='5'
    get-additional-data='getData(files)'
    on-done='done(files, data)'
    on-progress='progress(percentDone)'
    on-error='error(files, type, msg)'/>

您可以找到code on github以及my blog

上的文档

angularjs的文件上传器集成

5 个答案: