jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

ドラッグ&ドロップで複数画像をアップロードする

2017年5月23日

今更感が有りますしあちこちで紹介されていますが、とある案件で画像アップロードが必要になり、昔ながらの画像選択ボタンをと考えていたのですが、SNS等の利用経験があると画像はドラッグドロップで複数枚をいっぺんにアップロード出来るものだと知ってらっしゃる方も多く・・・プラグイン等も公開されてはいるのですが、企業の基幹システム系等、機密性を重視するプログラムではあまり使いたくは有りませんので、自作する事にしました。

ちなみに、FileAPI非搭載のブラウザは動作しません。まぁIE9以下ですが・・・そろそろIE10以上前提で書きたいですね・・・IE7で表示がおかしい!バグだ!っと指摘される事が未だにままあるので(泣

ドラッグ&ドロップで画像をアップロードする

サンプル

先ずはドラッグドロップで即画像をアップロードする簡単なサンプルです。

 

画像をドラッグする場所へ、ondragoverとondropイベントをセットします。

 

ブラウザへ画像をドロップすると画像が表示されてしまいますので、それぞれのfunctionには下記のように記述し、画像表示しないようにします。

 

ドロップするとevent.dataTransfer.filesに画像の情報が配列でセットされていますので、forで回してアップロード処理を行います。

ファイル情報はコンソールで見ると以下のようなもの

 

あとは同期通信でPHPに渡し、アップロード処理を行います。

PHPは以下のような簡単なもの

実際はファイル形式をチェックしたりリサイズしたり等様々な事をPHPで行いますが、要はアップロードしてファイル名を返してあげるだけの単純なものです。

 

プログレスバーを表示して格好良くアップロード

どうせなら画像アップロード状態を示すプログレスバーを表示して格好よくしてみます。

サンプル

アップロード時のAjaxにXHRを設定し、XMLHttpRequestUploadからアップロードプロセスを得ます。progressの数値をパーセンテージとしてspanの長さをアニメーションさせています。光回線ですとよほど大きな画像じゃなければ一瞬で終わってしまいますが。

 

アップロード前に画像をプレビューさせる

画像はアップロードしなくとも、どのファイルを選択したかプレビューする事が出来ます。

サンプル

 

ファイルをドロップした際にFileReaderで画像をプレビューします。

ファイルのURLはevent.target.resultで取り出せますので、それをIMGタグで表示するだけ。

あとはボタンを押したらアップロード処理を実行ですね。

実際はもっと小綺麗にCSSを書き、プレビューからアップロードしたい画像を選択させたりなどUIを凝りますが、基本的な事を押さえておけば応用が効きますので。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP