Comment créer une instruction pour télécharger des photos dans AngularJS (tutoriel détaillé)

Cet article présente principalement AngularJS pour créer un exemple de code de commande pour télécharger des photos. Les amis qui en ont besoin peuvent s'y référer

angularJS s'est développé rapidement ces dernières années, et c'est sans aucun doute le plus puissant et le plus puissant. un sur le marché. Un framework mature peut être considéré comme le roi parmi les applications frontales d'une seule page. La liaison bidirectionnelle permet d'économiser beaucoup de code frontal, et le contrôleur est également très difficile à contrôler. action.Aujourd'hui, nous allons parler d'une autre comparaison.La fonction la plus impressionnante est la directive d'angularJS. Si vous n'avez jamais entendu parler de la directive d'angularJS auparavant, essayez-la par vous-même. sera plus détaillé que le mien. Cette fois, j'utiliserai une directive de téléchargement d'image que j'ai écrite moi-même. Dans ce cas, les instructions du processus de fonctionnement réel sont expliquées en détail.

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 effectuer le traitement correspondant. De cette façon, chaque fois que j'écris une pièce jointe et que je la télécharge, je dois écrire du code pour la traiter. C'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 : &#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;
    }
  }
};
}]);

Une fois l'instruction terminée, il vous suffit d'écrire une ligne de code au recto- page de fin pour terminer le chargement des photos (si vous modifiez la page, vous devez charger les photos originales) et la fonction de téléchargement, dans laquelle scopeModel est utilisé pour la liaison bidirectionnelle Oui, après avoir passé le modèle dans le contrôleur lors de l'appel. , la liaison bidirectionnelle entre l'instruction et le contrôleur peut être réalisée. Le modèle dans le code est un modèle d'élément, qui peut être remplacé selon le style spécifique (j'utilise bootstrap comme suit :

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

Comment utiliser les modèles et les hooks Vue-Router (tutoriel détaillé)

Obtenir la valeur par défaut dans angulairejs La méthode de valeur du bouton radio sélectionné (tutoriel détaillé)

Interprétation complète de cli en vue (tutoriel détaillé)

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!