HTML5で、ファイルのドラッグドロップ操作に対応したということもあり、ファイルのドラッグドロップ操作で簡単にファイルをアップロードできるプラグインを探してたら、そのものずばりがあったので今回はこいつを使ってみることにした。
Dropzone：http://www.dropzonejs.com/
※バージョン2.0以降ではjQueryがなくても動作するようです。
原理としては、指定したブロックに対してファイルをドロップすると、指定のURLにドロップしたファイルをPOSTするという、ある意味簡単な仕組みである。
このDropzone単体ではファイルのアップロード操作しかできず、アップロードされたファイルの処理をphpなどで別途組み込む必要がある。
まずはクライアントサイドの処理から。
１．上記サイトからダウンロードしたJSファイルをリンクする
２．ファイルをドロップできるエリアを作る
３．formタグでエリアを作る
４．Dropzoneの初期化をする
とまぁこんな感じ。これをまとめると以下のようになる。
<script type=”text/javascript” src=”./jquery.js”></script>
<script type=”text/javascript” src=”./dropzone.js”></script><script type=”text/javascript”>
$(function(){
Dropzone.options.myAwesomeDropzone = {
success:function(file, responseText, e) {
// アップロード成功時の処理
// file・・・アップロードしたファイル情報
// responseText・・・サーバーの処理結果（printやecho等、標準出力された内容）
// e・・・イベントハンドラ・・・だと思う
}
};
var myDropzone = new Dropzone(“#drop_area”,{url:”./upload.php”});
});
</script><!— エリアの指定方法は、まだいろいろ試してみる余地はある。クラスやIDさえきちんと指定すれば、formタグ自体も不要だと思う。 –>
<div id=”drop_area” style=”width:100px;height:100px;”>
<form action=”./upload.php” method=”post” class=”dropzone” id=”my-awesome-dropzone”>
</form>
</div>
フロント側はこんな感じ。ドラッグドロップのエリアの中にフォームタグを用意する感じ。IDとクラスは↑のような指定をしないとうまく動かなかったので上記をコピペ推奨。
Dropzone.js自体にはjQueryを使わないが、いろいろと便利なのでjQueryは設定。上の例だとjQuery必須なので注意。バージョンは1.8.2で確認。
お次はサーバーサイド。例によって言語はphp。とはいうものの、基本はファイルの送信と同じ要領で対応できる。
＜upload.php＞
<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = “../upload”; //アップロード先フォルダ
if (!empty($_FILES)) {
$tempFile = $_FILES[“file”][“tmp_name”];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$filename = basename($_FILES[“file”][“name”]);
$targetFile = $targetPath. $filename;
move_uploaded_file($tempFile,$targetFile);
}
?>
ここらへんは本家サイト様からリンクしてあるページからほとんどそのまま拝借。
とまぁこんな感じで設定してあげたら、あとはファイルをドロップすればファイルのアップロードが行われる・・・はず。
実際に利用したコードを若干加工したので、上のプログラムが動作するかどうかはわからない。その点はご容赦を。
最後に、Dropzoneの動作オプションについては、下記の参考サイトに詳しく掲載されているので、そちらや本家サイト（英語）を見るのが一番。
参考サイト：Drag and Dropでファイルを簡単にアップロードできるコンテンツを作れるDropzone.js
http://webdelog.info/blog/2013/03/04/dropzonejs.html
