AngularJS implémente le téléchargement de photos

Cette fois, je vais vous apporter AngularJSimplémentationtéléchargerphotos, quelles sont les précautions pour qu'AngularJS implémente le téléchargement de photos, les suivantes sont pratiques cas, jetons un coup d’oeil.

AngularJS s'est développé rapidement ces dernières années et il s'agit sans aucun doute d'un framework relativement puissant et mature sur le marché. On peut dire qu'il est le roi des applications frontales d'une seule page qui permet d'économiser beaucoup de temps. code final et contrôle Le contrôle de l'outil est également assez impressionnant. Aujourd'hui, nous allons parler d'une autre fonctionnalité intéressante, qui est la directive d'angularJS. Amis qui n'ont jamais entendu parler de la directive d'angularJS auparavant, veuillez le vérifier par vous-même. La recherche d'un article vous donnera plus de détails que moi. Cette fois, j'utiliserai une instruction pour télécharger des images que j'ai moi-même écrite comme étude de cas pour expliquer en détail les instructions pendant l'opération réelle.

Auparavant, nous utilisions jqueryFileUpload pour télécharger des pièces jointes sur le front-end. Chaque fois que nous l'utilisons, nous devons dessiner le style sur la page, puis initialiser le composant de téléchargement dans le contrôleur. Lorsque le téléchargement réussit ou échoue, nous devons le faire. le traitement correspondant, de sorte que chaque fois que nous écrivons une pièce jointe, vous devez écrire du code pour traiter le téléchargement, ce qui est un travail très répétitif, je souhaite donc utiliser les instructions d'angularJS pour supprimer le travail répétitif. Le code spécifique est le suivant :

.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;
    }
  }
};
}]);

Une fois les instructions terminées, il vous suffit d'écrire une ligne de code sur la page frontale pour terminer le chargement des photos (si vous modifiez la page, vous devez charger les photos originales) et la fonction de téléchargement ScopeModel est utilisée. Pour une liaison bidirectionnelle, lors de l'appel, placez-le dans le contrôleur. Une fois le modèle transmis, la liaison bidirectionnelle entre l'instruction et le contrôleur peut être réalisée. remplacé selon le style spécifique (j'utilise bootstrap), utilisez comme suit :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes. , veuillez faire attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

vue détermine si le contenu d'entrée comporte des espaces

Comment Element-ui exploite la table pour modifier le contenu de la table

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!