AngularJS는 사진 업로드를 구현합니다.

이번에는 AngularJSimplementationuploadphotos를 가져왔는데, AngularJS의 사진 업로드 구현에서 notes가 무엇인지, 다음은 실제 사례입니다. 살펴보겠습니다.

AngularJS는 최근 몇 년 동안 빠르게 발전해 왔으며 의심할 여지 없이 시장에서 상대적으로 강력하고 성숙한 프레임워크입니다. 양방향 바인딩은 많은 프런트엔드 애플리케이션을 절약해 줍니다. end code, Controller 이것이 작동하는 측면에 대한 제어도 꽤 인상적입니다. 오늘은 이전에 AngleJS의 지시어를 들어본 적이 없는 또 다른 멋진 기능에 대해 이야기하겠습니다. 직접 찾아보시고 기사를 검색해 보세요. 제가 말한 것보다 모두 더 자세하게 설명되어 있습니다. 이번에는 제가 사례로 직접 작성한 사진 업로드 지침을 사용하여 실제 작업 중에 지침을 자세히 설명하겠습니다.

이전에는 jqueryFileUpload를 사용하여 프런트 엔드에 첨부 파일을 업로드할 때마다 페이지에 스타일을 그린 다음 업로드가 성공하거나 실패할 때 컨트롤러에서 업로드 구성 요소를 초기화해야 했습니다. 첨부 파일을 작성할 때마다 업로드를 처리하는 코드를 작성해야 하는데, 이는 매우 반복적인 작업이므로, 반복 작업을 제거하기 위해 각도 JS의 지침을 사용하고 싶습니다. 구체적인 코드는 다음과 같습니다.

rreee

지침이 완료된 후 프런트 엔드 페이지에 코드 한 줄만 작성하면 사진 로드가 완료되고(페이지를 수정하는 경우 원본 사진을 로드해야 함) ScopeModel이 사용됩니다. 양방향 바인딩의 경우 모델을 컨트롤러에 넣으면 명령과 컨트롤러 간의 양방향 바인딩이 실현될 수 있습니다. 특정 스타일에 따라 교체되었으며(저는 bootstrap을 사용합니다) 사용법은 다음과 같습니다.

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

믿습니다. 이 글의 사례를 읽으신 후 방법을 숙지하셨으니 더 흥미로운 정보를 확인하시기 바랍니다. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!

추천 자료:

vue는 입력 내용에 공백이 있는지 확인합니다.

Element-ui 테이블 내용을 변경하기 위해 테이블을 조작하는 방법

위 내용은 AngularJS는 사진 업로드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!