angular.jsでファイルアップロードする方法

angularjs
はじめに

ファイルアップロードする方法を調べてたら「angular file upload」というモジュールが有名ぽい。
danialfarid/angular-file-upload · GitHub
こちらがgithubになります。

サンプルみてみたけどあまりちゃんと理解できていないのですが、とりあえず普通にアップロードできるものを探していたのでそれはできました。けっこう多機能ぽいのですが、1番スタンダードな使い方を自分用にメモ。

インストール

bowerでインストール

bower install ng-file-upload
bower install ng-file-upload-shim
使い方メモ
<!DOCTYPE html>
<html lagn="ja">
  <head>
    <meta charset="utf-8" />
    <script src="./bower_components/angular/angular.js"></script>
    <script src="./bower_components/ng-file-upload/angular-file-upload.js"></script>
    <script src="./bower_components/ng-file-upload/angular-file-upload-shim.js"></script>
    <title>FileUpload</title>
    <script>
    var App = angular.module("App", ["angularFileUpload"]);
    App.controller("ControllerIndex", function($scope, $upload) {
      $scope.fileSelect = function($files) {
        $upload.upload({
          url: "http://example.com/fileupload.php",
          file: $files[0]
        });
      };
    });
    </script>
  </head>
  <body ng-app="App">
    <div ng-controller="ControllerIndex">
      <input type="file" ng-file-select="fileSelect($files)">
    </div>
  </body>
</html>

とりあえずこの形でファイルを選択した時点でサーバにアップロードできます。

以上です