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

指示が完了したら、1 行のコードを書くだけで写真の読み込みが完了し (ページが変更されている場合は、元の写真を読み込む必要があります)、アップロード関数にはscopeModel が使用されます。双方向バインディング。呼び出し時にコントローラーにモデルを渡した後、コントローラー間の双方向バインディングの場合、コード内のテンプレートは特定のスタイルに応じて変更できます (ブートストラップを使用します)。使い方は以下の通りです:

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

以上は皆さんのためにまとめたものです。

関連記事:

Vue-Routerパターンとフックの使い方(詳細なチュートリアル)

angularjsでデフォルトで選択されているラジオボタンのvalueメソッドを取得する(詳細なチュートリアル)

vueでの総合cli の解釈 (詳細なチュートリアル)

以上がAngularJS で写真をアップロードする命令を作成する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。