GD bbPress Attachmentsドラッグ&ドロップ複数画像プレビュー

bbPressおしゃれ画像掲示板

GD bbPress Attachmentsプラグインを使ってドラッグ&ドロップで複数の画像をプレビューするようにしてみました。

プラグインのソースコードを直接修正します。必ずバックアップをとるようにしましょう。

GD bbPress Attachmentsのフォームに関するソースコードは以下のファイルにコーディングされています。

wp-content/plugins/gd-bbpress-attachments/forms/uploader.php

HTMLを以下のように修正します。

<input type="file" size="40" name="d4p_attachment[]"><br/>
<a class="d4p-attachment-addfile" href="#"><?php _e("Add another file", "gd-bbpress-attachments"); ?></a>

 ↓

<div id="a1"></div>
<input type="file" size="40" name="d4p_attachment[]" multiple="multiple"><br/>

スタイルを追加します。ドラッグするエリアをデザインし、ドラッグ中はボーダー色を変更するようにしています。

<style>
#a1 {
    height: 50px;
    background-color: #f1f1f1;
    border: dashed 2px #b1b1b1;
    margin-bottom: 15px;
}

.a2 {
    border-color: #000 !important;
}
</style>

スクリプトをコーディングします。

<script>
(function($) {
    $(document).on('change', 'input[name="d4p_attachment[]"]', function() {
        f1($(this));
    });
    
    function f1(x) {
        f2(x);
        for (let i = 0; i < x[0].files.length; i++) {
            var f = x[0].files[i];
            if (f.type.match('image')) {
                var r = new FileReader();
                r.addEventListener('load', function(e) {
                    let m = $('<img>').attr('src', e.target.result);
                    x.after(m[0]);
                });
                r.readAsDataURL(f);
            }
        }
    }

    function f2(x) {
        if (x.next()[0].localName == 'img') {
            f2(x.next());
        }
        if (x[0].localName == 'img') {
            x.remove();
        }
    }

    $('#a1').on('dragover', function(e) {
        e.preventDefault();
        $(this).addClass('a2');
    });

    $('#a1').on('dragleave', function(e) {
        $(this).removeClass('a2');
    });

    $('#a1').on('drop', function(e) {
        e.preventDefault();
        $(this).removeClass('a2');
        $('input[name="d4p_attachment[]"]')[0].files = e.originalEvent.dataTransfer.files;
        $('input[name="d4p_attachment[]"]').change();
    });

    $('form').submit(function() {
        let z = <?php echo GDATTCore::instance()->get_max_files(); ?>;
        if ($('input[name="d4p_attachment[]"]')[0].files.length > z) {
            alert('over');
            return false;
        }
    });
})(jQuery);
</script>

submitするタイミングで管理ツールで設定したファイル数を越えた場合はアラートを表示してキャンセルするようにしています。変数zは以下のように展開されます。

let z = 4;

実際に動かすと以下の画像のようにドラッグ中はファイル数が表示されるようになります。(Google Chromeの場合)

ファイル選択ボタンもmultipleを設定しているので一度に複数のファイルを選択することができます。

タイトルとURLをコピーしました