画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdropzoneのことをメモっていたけど、もうちょっと突っ込んだ使い方のメモ。
■ダウンロード先
※ページ内で「download」で検索すると見つかりやすい。
■使い方
画像を送信するページ
<html> <head> <style> div#file{ /* dropzoneの表示エリア */ width:200px; height:100px; border:1px solid #000; padding: 10px; } img.previewImg{ /* サムネイルサイズ */ width: 100px; height: 100px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./dropzone.js"></script> <script type="text/javascript"> $(function(){ Dropzone.options.file = { paramName : "file" //受信側の$_FILESのキー , dragover : function(e){ //ドロップ時の処理 $("div#file").css("background-color", "#f0f0f0"); } , dragleave : function(e){ //ドロップが外れた場合の処理 $("div#file").css("background-color", "#ffffff"); } , success : function(file, responseText, e) { //アップロード成功時 console.log(responseText); //PHPでecho出力したものを持ってこられる $('div.preview').append('画像名:'+responseText+'<br><img src="./img/'+responseText+'" class="previewImg"><br>'); //アップロードしたものサンプル表示 } , previewTemplate : '<span></span>' //デフォでアップロードした画像が表示される部分を非表示 }; var myDropzone = new Dropzone("div#file", { url: "upload.php"}); }); </script> </head> <body> <div id="file"> 画像をここにドラッグするか、クリックして画像を選択して下さい。 </div> <div class="preview"> <!--アップロードした画像はここにサムネイル表示される--> </div> </body> </html>
画像を受信してディレクトリにアップロードするページ
<?php define('FILE_PATH','./img/'); //ファイルパスを指定 $imgKey = 'file'; //ファイルのキー if( !is_uploaded_file( $_FILES[$imgKey]['tmp_name']) ){ echo 0; exit(); } else { //拡張子チェック $tmpExt = $_FILES[$imgKey]['type']; if ($tmpExt == 'image/jpeg' || $tmpExt == 'image/jpg') $imgExt = '.jpg'; else if ($imgExt == 'image/png') $imgExt = '.png'; else if ($imgExt == 'image/gif') $imgExt = '.gif'; //ファイル名を「ランダム英数字.拡張子」で設定 $img = md5(uniqid(rand(), true)) . $imgExt; move_uploaded_file($_FILES["file"]["tmp_name"], FILE_PATH . $img ); echo $img; }
■その他
・ある程度のブラウザで使えそう
以前はIEのバージョンの問題で使用を見送ったけど、サポートされているIEのバージョンが10以上で、今の最新が11(公開日が2013/10/17)なので、そろそろ使っても大丈夫そう。
また、複数アップロードも対応しているのがありがたい。
・画像と一緒にデータも送りたい
例えばユーザIDみたいなものを送って、受信側で「ユーザID,画像名」をデータベースに残したい、みたいなことがあったとする。その場合はdropzoneの部分をformにしてinput=hiddenで送信するとよい。詳しくは以下のような形。
<html> <head> <style> form#file{ /* dropzoneの表示エリア */ width:200px; height:100px; border:1px solid #000; padding: 10px; } img.previewImg{ /* サムネイルサイズ */ width: 100px; height: 100px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="./dropzone.js"></script> <script type="text/javascript"> $(function(){ Dropzone.options.file = { paramName : "file" //受信側の$_FILESのキー , dragover : function(e){ //ドロップ時の処理 $("form#file").css("background-color", "#f0f0f0"); } , dragleave : function(e){ //ドロップが外れた場合の処理 $("form#file").css("background-color", "#ffffff"); } , success : function(file, responseText, e) { //アップロード成功時 console.log(responseText); //PHPでecho出力したものを持ってこられる $('div.preview').append('画像名:'+responseText+'<br><img src="./img/'+responseText+'" class="previewImg"><br>'); //アップロードしたものサンプル表示 } , previewTemplate : '<span></span>' //デフォでアップロードした画像が表示される部分を非表示 }; var myDropzone = new Dropzone("form#file", { url: "upload.php"}); }); </script> </head> <body> <form id="file" method="post"> <input type="hidden" name="testid" value="11111"><!--キーがtestid、値が11111を送る場合--> 画像をここにドラッグするか、クリックして画像を選択して下さい。 </form> <div class="preview"> <!--アップロードした画像はここにサムネイル表示される--> </div> </body> </html>
dropzoneのオプション部分で決められるとスマートなんだけど、ちょっと見当たらなかった。
関連記事
-
-
jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...
-
-
jQueryuiを用いてメールの入力補助(サジェスト)
autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...
-
-
IE11でフォーム送信時に二重登録される
Internet Explorer11でform送信時にデータが二重登録されると ...
-
-
画像をサムネイル⇔クリックで拡大(lightbox)
画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...
-
-
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア
タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
tableのヘッダーを残して表示(jquery-decapitate)
bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...
-
-
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...
- PREV
- html内に動画を埋め込んで配信する方法
- NEXT
- 画像の一部分のみリンクを設定する方法