AngularJS は写真のアップロードを実装します

今回は、AngularJS実装アップロード写真について説明します。AngularJS実装における写真アップロードの注意事項とは何ですか。以下は実際的なケースです。見てみましょう。

AngularJS は近年急速に発展しており、市場においては間違いなく比較的強力で成熟したフレームワークであり、双方向バインディングにより多くのフロントエンド アプリケーションが節約されます。終了コード、Controller 作用する側面の制御も非常に印象的です。今日は、angularJS のディレクティブについて話します。今回は私が作成した画像アップロード命令を例に、実際の操作時の手順を詳しく説明します。

以前は、フロントエンドで添付ファイルをアップロードするために jqueryFileUpload を使用していました。これを使用するたびに、ページにスタイルを描画し、アップロードが成功または失敗したときに、コントローラーでアップロード コンポーネントを初期化する必要がありました。添付ファイルを書くたびにアップロードを処理するコードを記述する必要があり、非常に繰り返し作業が多いため、angularJS の命令を使用して繰り返し作業を削除したいと考えています。具体的なコードは次のとおりです。

りー

指示が完了したら、フロントエンド ページに 1 行のコードを記述するだけで写真の読み込みが完了し (ページを変更する場合は、元の写真を読み込む必要があります)、アップロード関数が使用されます。双方向バインディングの場合、モデルを渡した後、それをコントローラーに配置します。コード内のテンプレートは要素テンプレートです。特定のスタイルに従って置き換えられ (私は 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 中国語 Web サイトにあります。

推奨読書:

vue は入力内容にスペースが含まれているかどうかを判断します

Element-ui テーブルを操作してテーブルの内容を変更する方法

以上がAngularJS は写真のアップロードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。