带角度的飞艇，手动触发上传答案

【问题标题】：bluimp with angular, triggering upload manully带角度的飞艇，手动触发上传
【发布时间】：2013-08-30 01:59:07
【问题描述】：

我正在使用this tutorial。问题是该指令返回的是上传对象，基本上是选择文件时自动触发上传。

虽然对 AngularJS 的了解比我更深的人可以想出一种方法来手动触发 bluimp 的上传事件，可能是通过按键，或者在回调中。

【问题讨论】：

标签： angularjs file-upload angularjs-directive

【解决方案1】：

你能看一下@下面的网址，他们正在使用开始按钮上传文件吗：

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

【讨论】：

好的，设法使用 FF 访问页面 - 很奇怪。无论如何，通过查看那里的代码，他们似乎正在使用 angular.provide 来创建一个带有 jQuery 插件的 API。我正在寻找一个轻量级的简单解决方案，最好使用我已经集成的代码。

【解决方案2】：

不确定问题出在哪里，但这可能会为您省去在 Angular 中确定文件上传的麻烦：

您可以使用简单/轻量级的angular-file-upload 指令。它支持带有 FileAPI flash shim 的非 HTML5 浏览器。它还支持拖放和上传进度。

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>

JS：

//inject angular file upload directive.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $upload.upload({
        url: 'my/upload/url',
        file: $file,
        data: {item: $scope.myModel},
        headers: {...}
        progress: function(e){}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

【讨论】：

谢谢，我尝试与您的上传者合作，但对我不利。如果您还记得的话，我不久前在您的 gitHub 存储库上打开了一些问题。主要问题是它使用 SWF 后备。
另外，您似乎不支持额外的表单数据和手动触发上传。感谢您的回复
您可以随文件发送其他数据，我更新了答案。 1.1.1 版还允许您使用 $upload 角度服务手动上传文件。我认为您使用的是第一个版本。
如果您不使用 SWF 回退，您将无法在 IE9 或更早版本的客户端获取上传进度、FormData 或实际文件二进制文件。您将无法对文件大小或类型进行客户端验证。因此，您的代码必须将文件作为表单提交发送，而无法对其进行任何控制。