勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

   2024/02/16  jQuery

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDropzone.jsのことをメモっていたけど、実運用でも使えるようもうちょっと詳しく使い方を学んでおきたい。あと、画像と一緒にID等のデータも一緒に送信する方法やCDNの取得先もあわせて以下にメモしておく。

 

ダウンロード先

http://www.dropzonejs.com/

ページ内で「download」で検索すると見つかりやすい。

尚、CDNで使いたい場合は以下参照。

https://cdnjs.com/libraries/dropzone

 

使い方

画像を送信するページ

<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="https://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="https://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

  関連記事

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法

画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...