angularjs - 手動でアップロードをトリガーする角度のある bluimp

Question

私はこのチュートリアルを使用しています。問題は、ディレクティブがアップロード オブジェクトを返すことです。これは基本的に、ファイルが選択されると自動的にアップロードをトリガーします。

私よりも AngularJS を深く理解している人なら、bluimp のアップロード イベントを手動で、おそらくキーを押すか、コールバック内でトリガーする方法を思いつくことができると思います。

Answer 1

問題がどこにあるかはわかりませんが、これにより、Angular でのファイルのアップロードを理解する手間が省ける可能性があります。

シンプル/軽量のangular-file-uploadディレクティブを使用できます。FileAPI フラッシュ 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);
      }); 
    }
  }
}];