GD bbPress Attachmentsアップロード前に画像をプレビュー

bbPressおしゃれ画像掲示板

GD bbPress Attachmentsプラグインのファイル選択時にボタン直下に画像をプレビューするようにしてみました。

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

動的に追加したファイル選択ボタンの場合、ボタンではなくdocumentのchangeイベントに処理をバインドする必要があります。

$('input').on('change', function() {
$(document).on('change', 'input', function() {
タイトルとURLをコピーしました