角度アップロード画像とユーザーへの表示

Question

ユーザーが画像を選択してその画像を確認のために即座に表示するUIを実装するのが好きです。ユーザーは、自分のプロフィールに画像をアップロード/保存するには「送信」をクリックする必要があります。

「すぐにユーザーの部分に戻って表示する」に問題があります。

Iは、次のマークアップで&コントローラ角いるFormDataを使用しています：

マークアップを

<input id="chooseFile" type="file" file-model="picFile" /> 

<img src="{{uploadedImage}}" /> <!-- this populates with filename but what is the path?? --> 

CONTROLLER

angular.element('#chooseFile').change(function(){ 

     var file = $scope.picFile; // this comes up "undefined" since file is still uploading when this is fired 

     $scope.uploadedImage = file.name; 

}); 

Iは、上記のコードと2主要な問題を有しています（comメント）：でも、最小のファイルは、コールバックがほとんど瞬時に発射されながらアップロードする> 0がかかるため

1）コントローラでは、fileアップ明らかにundefinedています。私は$timeoutを使用して仕事を得ているが、それはちょっとしたハックのことだ。ファイルがアップロードされるまでコールバックを待機させるにはどうすればよいですか？

2）ファイルをアップロードし、Angularのデータバインディングを使用してimgタグに表示することです。これは、srcにファイル名が入力されていますが、imgのパスは何ですか。キャッシュまたは何かのいくつかの一時的な場所??明らかに私はまだファイルを移動するためのパスを設定することはできません。

Answer 1

私はこの機能も必要でした。画像をすぐに表示する方法もありました。

angular.module('HelloWorldApp', []) 
 
    .controller('HelloWorldController', function($scope) { 
 
     $scope.uploadavtar = function(files) { 
 
     //var fd = new FormData(); 
 
     //Take the first selected file 
 
     //fd.append("file", files[0]); 
 
     
 
     var imagefile = document.querySelector('#file'); 
 
       if (imagefile.files && imagefile.files[0]) { 
 
        var reader = new FileReader(); 
 
        reader.onload = function (e) { 
 
         $('#temp_image') 
 
          .attr('src', e.target.result); 
 
        }; 
 
        reader.readAsDataURL(imagefile.files[0]); 
 
        this.imagefile = imagefile.files[0]; 
 
       }else{ 
 
        console.log("Image not selected"); 
 
       } 
 
     
 
     
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="HelloWorldApp"> 
 
    <div ng-controller="HelloWorldController"> 
 
     <input type="file" id="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/> 
 
    </div> 
 
     <img src="" id="temp_image" width="100"> 
 
    <div> 
 
    </div> 
 
</div>

Iは+ Angularjslaravelを使用していたので、店舗画像に別の関連のポストである：https://stackoverflow.com/a/34830307/2815635