djangoで画像のドラッグアンドドロップの実装2 -Javascript(jQuery)でモーダルダイアログの作成-

djangoのプロフィール画像設定で、ドラッグアンドドロップを用いたプロフィール画像の編集ができるコードを紹介します。最終的には画像をドラッグアンドドロップしてサーバー側(djangoのviews)でsaveまでを行うつもりですが、一度に紹介するのは冗長になりますので前回続きの記事の後半部分を紹介します。

前回記事↓↓

完成イメージ

今回の記事ではまだviewsまでは到達しません。

モーダルダイアログを利用した画像の表示までを進めます。

プロフィール写真をドラッグしたら、モーダルダイアログが出現します。

過去記事参考↓↓

こんな人向け

以下の人向けに記事を書いています。

・javascript(jQuery)でドラッグアンドドロップを実装したい

・djangoでドラッグアンドドロップでサーバーに画像を保存したい

環境

環境は以下になります。ちなみにヒロヤンの場合はpipenvでの環境開発を行っています。

環境

・OS Mac

・python 3.8

・django 2.2

・jQuery 3.5.1

実際のコード

それでは早速紹介をしていきます。

HTML

前回からの追記としてModal dialogで囲まれた箇所になります。

sample.html

CSS

html同様に/* modal dialog */で囲んだところが新たに追記したコードになります。

sample.css

JS

以下にJavascriptとjQueryでモーダルダイアログを出現させるコードを書きます。こちらも上記のhtml,cssと同様に// modal dialog以下で追記した内容がモーダルダイアログの挙動のコードになります。

sample.js

補足説明を以下にします。

  1. 4-44行目までが、ドラッグアンドドロップした時のUIの移り変わりの動作になります。
  2. 54-70行目でドロップされた画像のバリデーションをかけています。
  3. 56-59行目では、正規表現でpngファイル、もしくはjpegファイル以外がドロップされた場合は、警告のerrorlistを表示し、ドロップできないように制御しています。
  4. 62-70行目ではドロップされた画像が20MB以上の場合は、警告のerrorlistを表示し、ドロップできないように制御しています。
  5. 75-87行目がプレビュー表示についてです。
  6. 84-87行目でモーダルダイアログが表示された時の閉じる一覧の変数定義をしています。
  7. 92-99行目でモーダルダイアログが表示され、93行目で「はい」でクリックされ、96行目でサーバーに画像データを関数を呼び出していますが、冗長的になるので今回はこれ以上のコードは書いておりません。次回記事で説明します。
  8. 102-113行目で閉じる関数を呼び出しています。

以上です。これで最初の完成イメージの通りにモーダルダイアログが実装されたはずです!



スクールを利用して本格的に学ぶ

いかがでしたでしょうか?

10人中9人が挫折すると言われるプログラミングを、ヒロヤンも実はプログラミングスクールで学習をしてきたからで、結果、今はPythonエンジニアとして働いています。

挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。

これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。

ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考え、結果挫折せずに今に至っています。

今なら無料でキャリアカウンセリングを行っているCodeCamp(コードキャンプ)のようなプログラミングスクールもありますのでこれを機会に是非カウンセリングだけでも受けてみてはいかがでしょうか?

CodeCampで無料のカウンセリング

上記リンク先から無料相談ができます。

またこちら(↓)ではPython専用のプログラミングスクールをまとめ紹介しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です