LoginSignup
4

More than 5 years have passed since last update.

AngularJSで複数ファイルの一括アップロード

Posted at

はじめに

AngularJSでファイルアップロードする場合に1ファイルのみアップロードするのサンプルソースは多くありましたが、複数ファイルの一括アップロードのソースは全くありませんでした。
今回はAngularJSで複数ファイルの一括アップロードを行う場合の注意点をまとめました。
AngularJSでファイルをアップロードするの記事にあるサンプルソースから必要な変更点のみを記載します。

変更点

inputタグにmultiple属性を追加

<input type="file" file-model="file" multiple="multiple">

fileModelのdirectiveでfileオブジェクトのassign方法を変更

配列の先頭のみ値のみを設定していたところを、配列ごと設定するようい変更する。

model.assign(scope,element[0].files);

Post時にFormDataに全てのファイルオブジェクトを設定する

上記の変更で、$scope.fileは単一ファイルオブジェクトから配列のファイルオブジェクトになったため、Postする際は以下のように個別にappendする。

var data = new FormData();
if ($scope.file) {
    for (var i = 0; i < $scope.file.length; i++) {
        data.append('file' + i, $scope.file[i]);
    }
}

最後に

上記の変更で、サーバ側へリクエスト時に選択した複数のファイルを送信することが可能です。
複数ファイルの一括アップロード時に参考にしてみてください。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4