ถ้าต้องการให้แสดงรูปเรียงเป็นแถวละ 3 ต้องเขียน javascript ยังไง

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

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

User avatar
eange08
PHP Super Hero Member
PHP Super Hero Member
Posts: 625
Joined: 22/12/2020 10:09 am

ถ้าต้องการให้แสดงรูปเรียงเป็นแถวละ 3 ต้องเขียน javascript ยังไง

Post by eange08 »

ทำ upload รูปแล้วให้ javascript แสดงรูปแถวละ 3 รูปอย่างในภาพ ต้องเขียนยังงัยค่ะ
screenshot-localhost-2021.01.08-17_29_52.png
screenshot-localhost-2021.01.08-17_29_52.png (117.93 KiB) Viewed 399 times
code ในไฟล์ script.js ที่ทำ upload รูป

Code: Select all

  
           //---ส่วนที่อยากให้แสดงรูปแถวละ 3 รูป
                var tpl = $('<div class="row working">\n\
                                <div class="col-md-4 row_1"></div><div class="col-md-4 row_2"></div><div class="col-md-4 row_3"></div></div> ');
              
                     tpl.find('.row_'+row).append('<div class="row">\n\
<div class="col-md-12"><img src="uploads/before/cat-world.jpg" style="width:100%"></div>\n\
<div class="col-md-12"><p></p></div>');
          
                  tpl.find('p').text(data.files[0].name);
      //-----------------------------
           
            // Append the file name and file size
            
            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the icons.png to remove
            tpl.find('span').click(function(){
		
                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }
                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });');
           // tpl.find('p').text("");
                
         }else{
	var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#fff" /><div class="row"><div class="col-md-4"><p></p></div><div class="col-md-3 aft'+id_upload+'"></div><div class="col-md-2 download'+id_upload+'"></div><div class="col-md-1"><span></span></div></div></li>');
                tpl.find('p').text(data.files[0].name)
                 .append('<i>Size 60x60<br><div style="color:#ff29e6;">'+formatFileSize(data.files[0].size)+'</div></i>');
         }
            // Append the file name and file size
            
            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the icons.png to remove
            tpl.find('span').click(function(){
		
                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }
                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });
User avatar
eange08
PHP Super Hero Member
PHP Super Hero Member
Posts: 625
Joined: 22/12/2020 10:09 am

Re: ถ้าต้องการให้แสดงรูปเรียงเป็นแถวละ 3 ต้องเขียน javascript ยังไง

Post by eange08 »

ตอนนี้ทำได้แล้วนะคะ โดยที่
1. ไฟล์ pageupload.php (หน้าจอที่ผู้ใช้งานเห็นในส่วนของ upload รูป)

Code: Select all

<script src="script.js"></script> <!--ไฟล์ที่ส่งกลับมาแสดงหลัง upload ไปส่วนที่ 2-->
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data" >
<!------ส่วนที่ 1 ที่เลือกไฟล์มา upload รูปภาพ------>
<div class="col-md-12" id="div_load"> 
    <div id="drop_crop">
            <a>วางหรือเลือกไฟล์ที่นี้</a>
            <input type="file" name="upl" multiple /> <!--เป็นส่วนกดรับรูป-->
    </div>
    
     <div class="row crop_working">
             
            </div>
 </div><br>
 <!----------------------ส่วนที่ 2 แสดงรูปที่รับจาก upload ส่วนที่ 1 โดยใช้ template  ----------------------------->
 <template id="crop_template"> 
     <div class="col-md-6 row_3" style="border:1px solid #000;height: 250px;">
             <div class="row">
                        <div class="col-md-12 crop_img"> <!----ใส่ id=crop_img ส่งค่ากลับมาให้แสดงรูปภาพ-->
                                                   
                        </div>
                        <div class="col-md-12 crop_nm"></div> <!--id = crop_nm ส่งค่ากลับมาให้แสดงชื่อรูปภาพ หรือข้อความที่เราต้องการให้แสดง
                    </div>
         </div>
 </template>
 </form> 
2. ไฟล์ upload.php จะรับค่ามาจากฟอร์มของ pageupload.php และมีหน้าที่ส่งค่าแบบ json ไปที่ไฟล์ script.js

Code: Select all

<?php
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){  //----เช็คว่ามีรูปส่งมาหรือไม่
          
	if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/before/'.$_FILES['upl']['name'])){ //---เป็นการนำไฟล์ภาพเข้าโฟลเดอร์ uploads/before/
	//----ส่วนส่งค่าแบบ json 
	 header('Content-type: application/json');  
		echo '{"status":"success", "filename": "'.$_FILES['upl']['name'].'"}';   
		exit;		
	}
	
}
echo '{"status":"error"}';
exit;
?>


3. ไฟล์ script.js ที่รับค่า json มาจากไฟล์ upload.php

Code: Select all

$(function () {
	//----ส่วนเริ่มรับไฟล์รูปภาพแล้วไปแสดงบนหน้าจอ
        add: function (e, data) { 
                $('.crop_working').append($('#crop_template').html()); //---รับมาจาก <div class="row crop_working">  เพื่อส่งไปแสดงที่ <template id="crop_template">
                var tpl = $('.crop_working > div:last');  
                data.context = tpl;   
                $(tpl).find('.crop_nm').html(data.files[0].name + '<i>Size 60x60<br><div style="color:#ff29e6;">' + formatFileSize(data.files[0].size) + '</div></i>');  //----ส่วนที่แสดงบนหน้าจอที่เป็น crop_nm หากต้องการให้แสดงบนหน้าจอเพิ่มก็ไปแก้ที่ไฟล์ pageupload.php แล้วใช้ class="" อ้างอิง
     
    

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
            row = parseInt(row) + 1;
            jqXHR.done(function (result) {  //เป็นการรับค่าจากฝั่งไฟล์  upload.php 
      
                    $(tpl).find('.crop_img img').attr('src', 'uploads/before/' + result.filename);  //---ส่วนแสดงภาพโดยใช้ attr 
                console.log(result.status);
            });
        },
    });

});
ผลลัพท์ : ที่เป็น 2 แถวเพราะถ้าเป็น 3 แถวรูปจะเล็กไป
screenshot-localhost-2021.01.09-16_02_33.png
screenshot-localhost-2021.01.09-16_02_33.png (197.5 KiB) Viewed 388 times
Firpo2019
PHP Newbie
PHP Newbie
Posts: 4
Joined: 26/01/2021 9:47 am

Re: ถ้าต้องการให้แสดงรูปเรียงเป็นแถวละ 3 ต้องเขียน javascript ยังไง

Post by Firpo2019 »

สวัสดีคุณคิดว่าคุณแชร์ไฟล์ pageupload.php เพื่อตรวจสอบหรือไม่?
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Programming - PHP”

Who is online

Users browsing this forum: No registered users and 11 guests