AngularJS에서 사진을 업로드하는 지침을 만드는 방법(자세한 튜토리얼)

이 글에서는 주로 AngularJS를 소개하여 사진 업로드를 위한 지침 예제 코드를 작성합니다. 필요한 친구는 이를 참조할 수 있습니다.

angularJS는 최근 몇 년 동안 빠르게 발전해 왔으며 의심할 여지 없이 시장에서 상대적으로 강력하고 성숙한 프레임워크입니다. 양방향 바인딩은 많은 프런트엔드 코드를 절약하며 컨트롤러가 작동하는 측면을 제어하기가 매우 어렵습니다. 또 다른 멋진 기능이 바로AngularJS의 지시어입니다. 이전에AngularJS의 지시어를 들어본 적이 없다면, 어떤 기사든 검색해 보면 제가 이번에는 더 자세히 알아볼 것입니다. 실제 동작 시 주의 사항을 자세히 설명하기 위해 사례로 직접 작성한 이미지 업로드 지시문을 사용하겠습니다.

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

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

지침이 완료된 후 코드 한 줄만 작성하면 사진 로드(페이지가 수정된 경우 원본 사진을 로드해야 함)와 업로드 기능이 사용됩니다. 양방향 바인딩. 호출 시 컨트롤러에서 모델을 전달한 후 컨트롤러 간 양방향 바인딩의 경우 코드의 템플릿은 특정 스타일에 따라 변경할 수 있습니다. (저는 부트스트랩을 사용합니다.) . 사용법은 다음과 같습니다.

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

위는 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue-Router 패턴 및 후크 사용 방법(자세한 튜토리얼)

Angularjs에서 기본 선택된 라디오 버튼의 값 방법 가져오기(자세한 튜토리얼)

in vue Comprehensive cli 해석(자세한 튜토리얼)

위 내용은 AngularJS에서 사진을 업로드하는 지침을 만드는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!