So erstellen Sie eine Anleitung zum Hochladen von Fotos in AngularJS (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich AngularJS vorgestellt, um einen Befehlsbeispielcode zum Hochladen von Fotos zu erstellen. Freunde, die ihn benötigen, können darauf zurückgreifen.

AngularJS hat sich in den letzten Jahren rasant weiterentwickelt und ist zweifellos der leistungsstärkste Man kann sagen, dass ein ausgereiftes Framework der König unter den Single-Page-Front-End-Anwendungen ist. Die Zwei-Wege-Bindung spart viel Front-End-Code und der Controller ist auch sehr schwer zu steuern Aktion. Heute werden wir über einen weiteren Vergleich sprechen. Wenn Sie noch nie von der Direktive von AngularJS gehört haben, probieren Sie sie bitte selbst aus Diesmal werde ich eine von mir selbst geschriebene Anleitung zum Hochladen von Bildern verwenden. Die Anweisungen im eigentlichen Vorgang werden ausführlich erläutert.

Zuvor haben wir jqueryFileUpload zum Hochladen von Anhängen im Frontend verwendet. Bei jeder Verwendung müssen wir den Stil auf der Seite zeichnen und dann die Upload-Komponente im Controller initialisieren Wenn dies fehlschlägt, müssen wir die entsprechende Verarbeitung durchführen. Jedes Mal, wenn ich einen Anhang schreibe und hochlade, muss ich Code schreiben, um ihn zu verarbeiten. Daher möchte ich zum Entfernen die Anweisungen von AngularJS verwenden Die sich wiederholende Arbeit lautet wie folgt:

.directive('imageUpload',['Constants',function(Constants){
return {
  restrict: 'E',
  scope: {
    scopeModel:'=',
    title:'@'
  },
  template : &#39;<fieldset>&#39;
      +&#39;<legend>{{title}}<span class="fileinput-button"><span>重新上传</span>&#39;
      +&#39;<input type="file" name="file"></span></legend>&#39;
      + &#39;<span class="profile-picture">&#39;
      + &#39;<img class="img-responsive" alt="{{title}}" ng-src="{{loadImg(scopeModel)}}" style="display: block;"/>&#39;
      + &#39;</fieldset>&#39;,
  link : function(scope, element, attrs) {
    $(element).fileupload({
      url: &#39;file/upload&#39;,
      dataType: &#39;json&#39;,
      done: function(e, data) {
        var res = data.result;
        if(res.success){
          scope.scopeModel=res.data.fileKey;
          scope.$apply();
        }
      }
    });
    scope.loadImg=function(key){
      if(undefined==scope.scopeModel || null==scope.scopeModel || scope.scopeModel===&#39;&#39;){
        return $.ctx+&#39;/images/noImage.jpg&#39;;
      }
      if(scope.scopeModel.indexOf(&#39;http://&#39;)>-1){
        return scope.scopeModel;
      }
      return $.ctx+&#39;/file/getFile?fileKey=&#39;+scope.scopeModel;
    }
  }
};
}]);

Nachdem die Anweisung abgeschlossen ist, müssen Sie nur noch eine Codezeile auf das Frontend schreiben Seite zum Abschließen des Ladens von Fotos (wenn Sie die Seite ändern, müssen Sie die Originalfotos laden) und die Upload-Funktion, in der ScopeModel für die bidirektionale Bindung verwendet wird. Nach der Übergabe des Modells an den Controller beim Aufruf Eine -Wege-Bindung zwischen der Anweisung und dem Controller kann wie folgt erreicht werden: Die Vorlage im Code ist eine Elementvorlage, die entsprechend dem spezifischen Stil (ich verwende Bootstrap) ersetzt werden kann

<image-upload scope-model="imagePath" title="照片上传"></image-upload>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So verwenden Sie Vue-Router-Muster und -Hooks (ausführliches Tutorial)

Standard in AngularJS abrufen Die Wertmethode des ausgewählten Optionsfelds (ausführliches Tutorial)

Umfassende Interpretation von CLI in Vue (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Anleitung zum Hochladen von Fotos in AngularJS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!