วิธีการสร้าง pop-up เพื่อ drag and drop multi image upload บน phpbb

สำหรับผู้ที่ เริ่มต้น Programming - PHP มีอะไร แนะนำ หรือข้อสงสัยต้องบอร์ด นี้ คนที่มีความรู้ แบ่งปันคนอื่นบ้างนะ ปัญหาการเขียนโปรแกรม แบบ OOP Session Cookies php network

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 2527
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

วิธีการสร้าง pop-up เพื่อ drag and drop multi image upload บน phpbb

โพสต์โดย Ittichai_chupol » 08/12/2018 4:30 pm

--- สำหรับผู้ที่เคยตั้งกระทู้บนเว็บบอร์ด phpbb แบบดั่งเดิม นั้นจะรู้กันว่าการที่เราจะแทรกรูปภาพ ในแต่ละครั่งเราจะต้องทำการเลือกเมนูแนบรูปภาพที่ด้านล่าง ของหน้าตั้งกระทู้ แล้วคลิกที่ปุ่มแนบไฟล์จากนั้น ก็เลือกไฟล์ที่ต้องการจะแนบ แล้วจึงมาเลือกไฟล์ที่จะแทรกไปอีกครั่ง ซึ่งวิธีการนี้เป็นวิธีที่มีขั้นตอนการทำงานที่เยอะ จึงทำให้เสียเวลาสำหรับการที่ตั้งกระทู้ โดยการแนบรูปภาพในแต่ละครั่ง ซึ่งจริงแล้วในบอร์ดกระทู้ของ phpbb ยังมีฟั่งชั่น drag and drop ด้วย เพื่อลดขั้นตอนการแทรกรูปภาพลงนิดหน่อยนั้นคือการที่ เราสมารถลากรูปที่ต้องการมาใส่ได้เลย แต่สุดท้ายแล้วเราก็ต้องเข้าไปที่เมนูแนบไฟล์ เพื่อเลือกรูปภาพก่อนที่จะลงมาโพสในกระทู้อยู่ดี

--- วันนี้จึงจะขอแนะนำการสร้าง extension ที่ช่วยในการแนบไฟลืให้ง่ายบขึ้นสำหรับ บอร์ดของ phpbb นั้นคือ extension drag and drop multi image

--- โดยการที่เราจะมาทำในส่วนของการเขียนโคดการทำงาน ของ drag and drop multi image เราจะต้องรู้การว่า การสร้าง extension นั้น มีวิธีการสร้างอย่างไรบ้าง

โดยวิธีการสร้าง extension ได้จาก คลิกที่นี้

--- ซึ่งเมื่อเรามี extension แล้ว สิ่งต่้อไปที่จะต้องสร้าง นั้นคือ listenner

--- จริงแล้ว ขั้นตอนการทำงาน เบื่องต้น ของ drag and drop multi image นั้นคือการสร้าง popup สำหรับ phpbb

--- เมื่อได้ทำการศึกษาการทำงานของตัวอย่าง ทั้ง 3 ณ ข้างต้นแล้ว เราก็มาเริ่มการเขียนโคด drag and drop multi image กันเลย


ขั้นตอนการสร้าง - เขียนโคด drag and drop multi image

1. เราจะต้องทราบ ว่า ในการสร้าง drag and drop multi image จะต้องมีไฟล์ อะไรมาช่วยในการออกแบบ ช่วยทำงาน ให้กับเราบาง
โดยไฟล์ที่ใช่สำหรับการทำงานนั้นคือ
theme.zip
(11.4 KiB) ดาวน์โหลด 112 ครั้ง

js.zip
(118.59 KiB) ดาวน์โหลด 100 ครั้ง



2.ส้่วนการแสดง html โดย ใน เข้าไปสร้างไฟล html ที่ style -> template มีชื่อตาม extension


โค้ด: เลือกทั้งหมด

//css
<style type="text/css">
    black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }
    .white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 16px solid orange;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
    es fadeup {
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    @keyframes faderight {
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes fade {
        to {
            opacity: 1;
        }
    }
    @media (max-width: 400px){
        width: 100%;
        height: 100%;
    }
    }

</style>

// ปุ่มเรียก pop up
<button type="button" class="button button-icon-only bbcode-img" accesskey="p" name="addbbcode14" value="Img" onclick="mpopimg()"  title="{L_BBCODE_P_HELP}">
    <i class="icon fa-image fa-fw" aria-hidden="true"></i>
</button>

//popup
<div id="light" class="white_content">
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display = 'none';document.getElementById('fade').style.display = 'none' ">Close</a>
    <div id="uploader" >
        <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
    </div>
    <br />
</div>
<div id="fade" class="black_overlay"></div>




3.ส่วนี้เป็น javascript ที่เขียนเสริมเข้ามา

โค้ด: เลือกทั้งหมด


{% INCLUDEJS '@mindphp_m_upload_image_easy/js/messagebox.js' %}
{% INCLUDEJS '@mindphp_m_upload_image_easy/js/jquery-ui.min.js' %}
{% INCLUDEJS '@mindphp_m_upload_image_easy/js/jquery.ui.plupload.js' %}
{% INCLUDEJS '@mindphp_m_upload_image_easy/js/plupload.full.min.js' %}
<script type="text/javascript">
      function mpopimg()
  {
  document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';
  }
// Initialize the widget when the DOM is ready
    jQuery(function ($) {
        $("#uploader").plupload({
            runtimes: 'html5',
            url: './posting.php?mode=post&f=2',
            max_file_size: '262144b',
            unique_names: true,
            rename: true,
            filters: [{title: 'Images', extensions: 'gif,png,jpeg,jpg,tif,tiff,tga'}, {title: 'Archives', extensions: 'gtar,gz,tar,zip,rar,ace,torrent,tgz,bz2,7z'}],
            headers: {'X-PHPBB-USING-PLUPLOAD': '1', 'X-Requested-With': 'XMLHttpRequest'},
            file_data_name: 'fileupload',
            multipart_params: {'add_file': '\u0E2A\u0E48\u0E07\u0E44\u0E1F\u0E25\u0E4C\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01'},
            form_hook: '#postform',
            dragdrop: true,
            views: {
                list: true,
                thumbs: true,
                active: 'thumbs'
            },
            init: {
                BeforeUpload: function (up, file) {
                    $('.file-list-container').removeClass('hidden');
                    up.settings.multipart_params = {
                        filename: file.name
                    };
                },
                FileUploaded: function (up, file, response) {
                    phpbb.plupload.insertRow(file);
                    $('.file-list-container').removeClass('hidden');
                    var json = {},
                            row = $('#file-list-container').find('#' + file.id),
                            error;

                    // Hide the progress indicator.
                    row.find('.file-progress').hide();
                    try {
                        json = JSON.parse(response.response);
                    } catch (e) {
                        error = 'Error parsing server response.';
                    }
                    file.attachment_data = json.data[0];

                    row.attr('data-attach-id', file.attachment_data.attach_id);
                    row.find('.file-inline-bbcode').show();
                    row.find('.file-status').addClass('file-uploaded');
                    var index = $('#file-list-container .attach-row').length - 1;
                    phpbb.plupload.update(json.data, 'addition', index, [json.download_url]);

                },
                UploadComplete: function (up, files) {
                    //console.log(phpbb.plupload.data);
                    console.log(up);
                    $.each($('#file-list-container').find('.attach-comment'), function (i) {
                        var index = i - 1;
                        if (index >= 0) {
                            var rname = up.files[index].attachment_data.real_filename;
                            //console.log(rname);
                            attachInline(index, rname); //ส่งค่าไปฟังชั่น
                            console.log(index);
                            console.log(up.files[index]);
                            phpbb.plupload.data[index] = up.files[index].attachment_data;
                            phpbb.plupload.ids[index] = up.files[index].attachment_data.attach_id;

                            $.each($(this).find('input,textarea'), function () {
                                var name = $(this).prop('name');
                                $(this).prop('name', name.replace(/(\d)/, index));
                            });
                        }
                    });
                }
            }
        });
       
    });
   
   
</script>




ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 48 และ บุคคลทั่วไป 0 ท่าน