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

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

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

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

りー

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

.directive('imageUpload',['Constants',function(Constants){
return {
  restrict: 'E',
  scope: {
    scopeModel:'=',
    title:'@'
  },
  template : '

'       +'

{{title}}重新上传'       +'

'       + ''       + ''       + '

',   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 サイトの他の関連記事を参照してください。