Wie man ein Bild anzeigt, das ich mit meiner Direktive auf meinen Controller hochgeladen habe

Question

Nun, das ist mein erster Versuch mit dem Upload von Bildern in JS zu arbeiten. Ich arbeite mit einem Angular-Projekt, das ein Bild vom Benutzer hochladen und auf einer Seite anzeigen muss. (Sehr gerne laden wir unser Profilbild auf Facebook hoch, nur dass diese Seite später als PDF heruntergeladen wird).

Ich war enttäuscht zu sehen, ng-Modell nicht mit Dateityp arbeiten. Ich habe viele Dinge ausprobiert und schließlich eine Direktive gemacht, die die Datei zu meinem Controller bringt (Hilfe von here).

Jetzt habe ich Datei in meinem $ scope.myPic Variable. Wie gehe ich mit dieser Datei umher. Wie zeige ich es an? . Ich habe versucht, die Variable direkt zu binden {{myPic}}, was nicht funktioniert . Ich habe versucht mit (#id) .value(). Speichern Sie dies in Variable und Bindung, die nicht funktionierte.

Es gibt andere Paare von Dingen, die ich ausprobiert habe, aber ich konnte mir nicht helfen.

Kann jemand die Möglichkeit bieten, Bilder zu binden, die von Benutzern von ihren Systemen in die HTML-Seite in Angular hochgeladen werden. Jedes gute Links sind mehr als geschätzt ...

FYI:

Meine Richtlinie fn:

function uploadPicFn($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.picModel); 
      var modelSetter = model.assign; 

      element.bind('change', function(){ 
       scope.$apply(function(){ 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}; 

mein html:

<div class="aw_textarea"> 
     <label>That's me:{{home.myPic}}</label></br> 
     <input class="pd_txtarea" type="file" pic-model="home.myPic"/> 
    </div> 

Answer 1

dies getan werden kann, zum Beispiel, mit File Reader.

Sie haben erwähnt, dass Sie Hilfe von here erhalten haben. Also habe ich jsfiddle aus diesem Artikel mit einem sehr einfachen Codebeispiel, wie FileReader benutzt werden kann, aktualisiert. Werfen Sie einen Blick - jsfiddle

 link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 
      var img = element.parent().children()[2]; 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
      angular.element(img).attr('src', e.target.result); 
      } 

      element.bind('change', function(){ 
      scope.$apply(function(){ 
       modelSetter(scope, element[0].files[0]); 
      }); 
      reader.readAsDataURL(element[0].files[0]); 
     }); 
    }