[解決済み】AngularJSを使ったファイルのアップロード

質問

以下は私のHTMLフォームです。

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

ローカルマシンから画像をアップロードし、アップロードされたファイルの内容を読み取りたいのです。これらはすべてAngularJSを使って行いたい。

の値を表示しようとすると $scope.file は未定義と表示されます。

解決方法は？

このページでは、いくつかの回答が FormData() しかし、残念ながらこれはInternet Explorer 9以下では利用できないブラウザ・オブジェクトです。もし、これらの古いブラウザをサポートする必要があるのなら、次のようなバックアップ戦略が必要でしょう。 <iframe> またはFlashを使用します。

ファイルアップロードを行うためのAngular.jsのモジュールは、すでに数多く存在します。 この2つは古いブラウザを明示的にサポートしています。

• https://github.com/leon/angular-upload - はフォールバックとしてiframeを使用します
• https://github.com/danialfarid/ng-file-upload - フォールバックとしてFileAPI/Flashを使用します。

その他にもいくつかオプションがあります。

• https://github.com/nervgh/angular-file-upload/
• https://github.com/uor/angular-file
• https://github.com/twilson63/ngUpload
• https://github.com/uploadcare/angular-uploadcare

これらのうち1つはあなたのプロジェクトに適合するはずですし、自分でコーディングする方法についてのヒントを与えてくれるかもしれません。