はじめに
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]);
}
}
最後に
上記の変更で、サーバ側へリクエスト時に選択した複数のファイルを送信することが可能です。
複数ファイルの一括アップロード時に参考にしてみてください。