AngularJS implements uploading photos

This time I will bring you AngularJSimplementationuploadphotos, what are the notes for AngularJS to implement uploading photos, the following is a practical case, Let’s take a look.

AngularJS has been developing rapidly in recent years, and it is undoubtedly a relatively powerful and mature framework on the market. It can be said to be the king among single-page front-end applications. Two-way binding saves a lot of front-end code, control The control of the tool is also quite impressive in terms of its functions. Today we are going to talk about another more awesome function, which is the directive of angularJS. Friends who have not heard of the directive of angularJS before, please check it out for yourself. Searching for any article will give you more details than I can. This time I will use an instruction for uploading pictures that I wrote myself as a case study to explain in detail the instructions during the actual operation.

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 have to do the corresponding processing, so that every time we write an attachment You have to write code to process the upload, which 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 : '<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;
    }
  }
};
}]);

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

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue determines whether the input content has spaces

How does Element-ui operate the table to change the table content

The above is the detailed content of AngularJS implements uploading photos. For more information, please follow other related articles on the PHP Chinese website!