AngularJS implementiert das Hochladen von Fotos

Dieses Mal bringe ich Ihnen AngularJSImplementierungHochladenFotos, welche Vorsichtsmaßnahmen es gibt, damit AngularJS das Hochladen von Fotos implementiert, das Folgende ist praktisch Fälle, werfen wir einen Blick darauf.

AngularJS hat sich in den letzten Jahren rasant weiterentwickelt und ist zweifellos ein relativ leistungsfähiges und ausgereiftes Framework auf dem Markt. Man kann sagen, dass es der König unter den Single-Page-Front-End-Anwendungen ist. Die Zwei-Wege-Bindung spart viel Front-End. Endcode und Steuerung Die Steuerung des Tools ist auch ziemlich beeindruckend. Heute werden wir über eine weitere coole Funktion sprechen, nämlich die Direktive von AngularJS. Freunde, die noch nie von der Direktive von AngularJS gehört haben. Bitte probieren Sie es selbst aus. Wenn Sie nach einem Artikel suchen, erhalten Sie mehr Details als ich. Diesmal verwende ich eine Anleitung zum Hochladen von Bildern, die ich selbst als Fallstudie geschrieben habe, um die Anweisungen während des tatsächlichen Vorgangs ausführlich zu erklären.

Zuvor haben wir jqueryFileUpload zum Hochladen von Anhängen im Frontend verwendet. Jedes Mal, wenn wir es verwenden, müssen wir den Stil auf der Seite zeichnen und dann die Upload-Komponente im Controller initialisieren die entsprechende Verarbeitung, sodass wir jedes Mal, wenn wir einen Anhang schreiben, Code schreiben müssen, um den Upload zu verarbeiten, was eine sehr repetitive Arbeit ist, daher möchte ich die Anweisungen von AngularJS verwenden, um die repetitive Arbeit zu entfernen. Der spezifische Code lautet wie folgt:

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

Nachdem die Anweisung abgeschlossen ist, müssen Sie nur noch eine Codezeile auf der Front-End-Seite schreiben, um das Laden der Fotos abzuschließen (wenn Sie die Seite ändern, müssen Sie die Originalfotos laden) und die Upload-Funktion verwenden Für die bidirektionale Bindung wird es in den Controller eingefügt, sodass die bidirektionale Bindung zwischen der Anweisung und dem Controller realisiert werden kann entsprechend dem spezifischen Stil ersetzt (ich verwende Bootstrap), verwenden Sie ihn wie folgt:

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

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue ermittelt, ob der Eingabeinhalt Leerzeichen enthält

Wie Element-ui die Tabelle bedient, um den Tabelleninhalt zu ändern

Das obige ist der detaillierte Inhalt vonAngularJS implementiert das Hochladen von Fotos. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!