ขอสอบถามเรื่อง upload file ค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอสอบถามเรื่อง upload file ค่ะ

ขอสอบถามเรื่อง upload file ค่ะ
ถ้าต้องการ upload รูปหลายๆไฟล์แล้วให้สคริปที่ต้องโชว์เป็นรูปตัวอย่างก่อน submint ต้องเปลี่ยนสคริปตรงไหนค่ะ ช่วยดูหน่อยค่ะ เอามาดัดแปลงแล้วก็ยังไมไ่ด้เลยค่ะ
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
		<div class="form-group col-xs-12 col-sm-6 col-md-6">
    		<label>CV :</label>
      				<img src="document/<?=$row['cd_file']?>"  width="200" class="img-responsive"/><br />
                    <input type="hidden" name="cd_id" id="cd_id" />
      				<div class="col-sm-3 input-group">
                		<input type="text" class="form-control" value="<?=$row["cd_file"] ?>" readonly>
                           <span class="input-group-btn">
                    			<span class="btn btn-primary btn-file">
                        			Browse&hellip; <input type="file" name="cv" id="file_upload" multiple="true">
                    			</span>
                			</span>  
                                    
                     </div>
            		<span class="help-block">
                		Try selecting one or more files and watch the feedback
            		</span>  
                    <div class="thumbnail" class="img-responsive"></div>
  		</div>
        <div class="form-group col-xs-12 col-sm-6 col-md-6">
    		<label>Passport :</label>
      				<img src="document/<?=$row1['cd_file']?>" class="img-responsive" width="250"/><br />
        			<div class="col-sm-3 input-group">
                		<input type="text" class="form-control" value="<?=$row1["cd_file"] ?>" readonly>
                           <span class="input-group-btn">
                    			<span class="btn btn-primary btn-file">
                        			Browse&hellip; <input type="file" name="passport" id="file_upload" multiple="true">
                    			</span>
                			</span>  
                                    
                     </div>
            		<span class="help-block">
                		Try selecting one or more files and watch the feedback
            		</span>  
                    <div class="thumbnail" class="img-responsive"></div>
  		</div>
</form>

 <script type="text/javascript">
	$(function () {  
  
  
    $(".upload").on("click",function(e){  
        $(".file_upload").show().click().hide();  
        e.preventDefault();  
    });  
    $(".file_upload").on("change",function(e){  
        var files = this.files  
        showThumbnail(files)          
    });  
  
    function showThumbnail(files){  
  
        $(".thumbnail").html("");  
        for(var i=0;i<files.length;i  ){  
            var file = files[i]  
            var imageType = /image.*/  
            if(!file.type.match(imageType)){  
                //     console.log("Not an Image");  
                continue;  
            }  
  
            var image = document.createElement("img");  
            var thumbnail = document.getElementsByClassName("thumbnail");  
            image.file = file;  
            thumbnail.appendChild(image)  
  
            var reader = new FileReader()  
            reader.onload = (function(aImg){  
                return function(e){  
                    aImg.src = e.target.result;  
                };  
            }(image))  
  
            var ret = reader.readAsDataURL(file);  
            var canvas = document.createElement("canvas");  
            ctx = canvas.getContext("2d");  
            image.onload= function(){  
                ctx.drawImage(image,100,100)  
            }  
        } // end for loop  
  
    } // end showThumbnail       
});  

</script>


Chickenkook 22-09-2015 14:28:59

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
โค้ดหน้านี้ ใช้ได้เลย ไม่ต้องสร้าง input file หลายอัน
ใช้ input file อันเดียว เวลาเลือกหลายรูป ก็กดปุ่ม ctrl ค้าง แล้วก็เลือกรูป ที่ต้องการ
พอได้ครบแล้วก็ ok รูปก็จะไปแสดง ทั้งหมด

แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่าย 


ninenik 22-09-2015
 ความคิดเห็นที่ 2
แล้วถ้าต้องการ resize รูปภาพที่แสดงละค่ะ ต้องทำยังไง


chickenkook 22-09-2015 17:08
 ความคิดเห็นที่ 3
ด้านล่างตรงคอมเม้นเฟส มีถามตอบ และวิธีการกำหนดขนาด ในหน้าลิ้งค์ตามความเห็นที่ 1


ninenik 22-09-2015
 ความคิดเห็นที่ 4
ขอบคุณค่ะ


chickenkook 23-09-2015 09:45
 ความคิดเห็นที่ 5
แล้วถ้าเราเลือก 4 ไฟล์แล้ว สมาถ insert รูปทีเดียว ทั้ง 4 ไฟล์เลยได้ไหมค่ะ 


chickenkook 28-09-2015 19:30
 ความคิดเห็นที่ 6
ได้วนลูป array เอา

<?php
// วนลูปไฟล์ุถ้ามีเข้าไปใช้ เช่นไฟง์ชั่นอัพโหลดไฟล์
if(count($_FILES['file_upload']['name'])>0){
    foreach($_FILES['file_upload']['name'] as $key=>$value){
        
        // วนลูปของแต่ละรายการ ใช้ค่าไหนก็เลือกไปได้เลย 
//        $_FILES['file_upload']['name'][$key];
//        $_FILES['file_upload']['type'][$key];
//        $_FILES['file_upload']['tmp_name'][$key];
//        $_FILES['file_upload']['error'][$key];
//        $_FILES['file_upload']['size'][$key];

    }
}
?>  


ninenik 29-09-2015
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ