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行目で閉じる関数を呼び出しています。

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

最終の完成版の実装は以下のリンク先から紹介しています。

プログラミング学習を効率良く進めるには…

私ヒロヤンがプログラミングを始めた頃は以下のような感じでした。

何から手をつけていいのか、わからない。

プログラミングを始めてみたけど、エラーが解決できない。

そしてネットで調べていくうちに膨大な時間が過ぎていきました。

私ヒロヤンの実体験より、プログラミングを効率的に学ぶために大切なことは以下のことだと考えています。

1. いつまでもダラダラとやらないで、目標を決定して短期集中する

2. マンツーマンで、わからない箇所は直ぐに質問をして即レスをもらう

.proでは私ヒロヤンが学習してきたプログラミング経験0からのpython/django、その他webサイト・サービス開発のコースが用意されています。

カウンセリング自体は無料なので話を聞いてみるだけでもいかがでしょうか?

また以下のリンク先ではdjangoを教えてくれるスクールをまとめ紹介しています。

コメントを残す

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