วิธีการสร้าง pop-up เพื่อ drag and drop multi image upload บน phpbb
โพสต์แล้ว: 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 จะต้องมีไฟล์ อะไรมาช่วยในการออกแบบ ช่วยทำงาน ให้กับเราบาง
โดยไฟล์ที่ใช่สำหรับการทำงานนั้นคือ
2.ส้่วนการแสดง html โดย ใน เข้าไปสร้างไฟล html ที่ style -> template มีชื่อตาม extension
3.ส่วนี้เป็น javascript ที่เขียนเสริมเข้ามา
--- วันนี้จึงจะขอแนะนำการสร้าง 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 จะต้องมีไฟล์ อะไรมาช่วยในการออกแบบ ช่วยทำงาน ให้กับเราบาง
โดยไฟล์ที่ใช่สำหรับการทำงานนั้นคือ
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>
โค้ด: เลือกทั้งหมด
{% 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>