How to create an instruction to upload photos in AngularJS (detailed tutorial)

This article mainly introduces AngularJS to create an instruction example code for uploading photos. Friends who need it can refer to it

angularJS has been developing rapidly in recent years, and it is undoubtedly the most powerful and powerful one on the market. A mature framework can be said to be the king among single-page front-end applications. Two-way binding saves a lot of front-end code. The controller is also very difficult to control in terms of its action. Today we are going to talk about another comparison. The cool function is the directive of angularJS. If you have never heard of the directive of angularJS before, please try it out on your own. If you search for any article, it will be more detailed than what I can explain. This time I will use an image uploading directive that I wrote myself. As a case, the instructions in the actual operation process are explained in detail.

Previously, we used jqueryFileUpload to upload attachments on the front end. Every time we use it, we have to draw the style on the page, and then initialize the upload component in the controller. When the upload succeeds or fails, we need to do the corresponding processing. In this way, every time I write an attachment and upload it, I have to write code to process it. This is very repetitive work, so I want to use the instructions of angularJS to remove the repetitive work. The specific code is as follows:

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

After the instruction is completed, you only need to write a line of code on the front-end page to complete the loading of photos (if you modify the page, you need to load the original photos) and the upload function, in which scopeModel is used for two-way binding. After passing the model in the controller when calling, the two-way binding between the instruction and the controller can be achieved. The template in the code is an element template, which can be replaced according to the specific style (I use bootstrap), as follows:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use Vue-Router patterns and hooks (detailed tutorial)

Get default in angularjs The value method of the selected radio button (detailed tutorial)

Comprehensive interpretation of cli in vue (detailed tutorial)

The above is the detailed content of How to create an instruction to upload photos in AngularJS (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!