画像をサーバーにアップロードAngular JS

Question

私はAngularを使ってWebアプリケーションのフロントエンドを開発しています。私はこの技術で新しいです。私はコントローラにイメージを渡してサーバーにアップロードする方法を知らない。

私は画像含めるのHTMLがあります。

<div class="col-lg-1"> 
    <label class="btn btn-default" style="margin-top: 35px"> 
     <i class="fa fa-picture-o" aria-hidden="true"></i> 
     <input type="file" style="display: none;" accept="image/*" ng-model="image"> 
    </label> 
</div> 

今、あなたは（画像がNG-モデル=「画像」を持っていますが、コントローラでは、私はにconsole.logをすればことがわかりますが$ scope.image）私は定義されていません。

イメージをバイナリ表現にエンコードし、それを他の属性を持つJSONに入れてサーバーにアップロードしたいとします。

どうすればよいですか？

Answer 1

あなたはこの

あなたのHTML内

<input type="file" id="file" name="file"/> 
<button ng-click="upload()">Upload</button> 

お使いのコントローラで

$scope.upload = function() { 
    var f = document.getElementById('file').files[0]; 
    var r = new FileReader(); 
    r.onloadend = function(e) { 
     var data = e.target.result; 
    } 
    r.readAsBinaryString(f); 
}