画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdropzoneのことをメモっていたけど、もうちょっと突っ込んだ使い方のメモ。
■ダウンロード先
※ページ内で「download」で検索すると見つかりやすい。
■使い方
画像を送信するページ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<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> |
画像を受信してディレクトリにアップロードするページ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?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で送信するとよい。詳しくは以下のような形。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<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で関数処理中にブラウザのブロック(intro.js)
Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...
-
-
jQueryプラグインを作成する方法
jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...
-
-
Ajaxで画像のアップロード(jquery.upload)
業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...
-
-
スマホ対応カルーセルスライダーslickの使い方
イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...
-
-
FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード
FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...
-
-
jQueryで画像を遅延ロードする(jquery.lazyload.js)
画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...
-
-
jQueryでimgタグのsrcを変える
やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...
-
-
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...
-
-
getElementsByTagName
うろ覚えだけど業務中に、 document.getElementById('aa ...
-
-
Ajaxで負荷軽減
業務中、専用のページでfile_get_contents的なものは あまり使わな ...
- PREV
- html内に動画を埋め込んで配信する方法
- NEXT
- 画像の一部分のみリンクを設定する方法