สอบถามเกี่ยวกับการตรวจสอบขนาดของ File หลังจากเพิ่มฟอร์มหน่อยครับ

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

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

tomsmile05
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 06/12/2018 9:48 am

สอบถามเกี่ยวกับการตรวจสอบขนาดของ File หลังจากเพิ่มฟอร์มหน่อยครับ

โพสต์โดย tomsmile05 » 06/12/2018 10:40 am

ขอสอบถามพี่ๆอีกสักรอบครับ ผมทำฟอร์ม jQuery Add / Remove สามารถเพิ่มฟอร์ม ลบฟอร์มได้ แต่มันติดที่เวลาเพิ่มฟอร์มที่ 2 และ 3 ส่วนของการเลือกไฟล์ กลับไม่ตรวจสอบ ขนาดของไฟล์ในส่วนของฟอร์มที่ผมกด Add ขึ้นมา มันเป็นเพราะอะไรอ่าครับ ช่วยแนะนำผมทีนะครับ ตามรูปและ code นี้เลยครับ

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

<html>
<head>
<title>jQuery add / remove example</title>
  <script type="text/javascript"  src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="jquery.validate.1.9.min.js"></script>
  <script type="text/javascript" src="jquery-checkform-validation.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
.custom_file {
  margin: auto;
  opacity: 0;
  position: absolute;
  z-index: -1;
}
</style>

</head>

<body>
<?php
   //Save Data
   if(isset($_POST['testsave'])){

      echo '<pre>';
         print_r($_POST);
      echo '</pre>';

      echo '<pre>';
         print_r($_FILES);
      echo '</pre>';
   }
?>

<script type="text/javascript">
   $(document).ready(function(){

      var counter = 2;

      $("#addMore").click(function () {

      if(counter>5){
            alert("สูงสุด 5 อันดับแรกเท่านั้น!!");
            return false;
      }   

      var newTextBoxDiv = $(document.createElement('div'))
          .attr("id", 'TextBoxDiv' + counter);

      newTextBoxDiv.after().html('<div class="form-row">\
                  <div class="form-group col-md-2">\
                    <label for="education_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">ระดับการศึกษาที่ '+ counter +'</label> <span style="color: red;">*</span> <input class="form-control" type="text" name="education_applicant'+ counter +'" id="education_applicant'+ counter +'"><span class="myErrors"></span>\
                  </div>\
                  <div class="form-group col-md-3">\
                    <label for="academy_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">สถาบันการศึกษา</label> <span style="color: red;">*</span> <input class="form-control" type="text" name="academy_applicant'+ counter +'" id="academy_applicant'+ counter +'"><span class="myErrors"></span>\
                  </div>\
                  <div class="form-group col-md-3">\
                    <label for="major_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">สาขาวิชา</label> <span style="color: red;">*</span> <input class="form-control" type="text" name="major_applicant'+ counter +'" id="major_applicant'+ counter +'"><span class="myErrors"></span>\
                  </div>\
                  <div class="form-group col-md-2">\
                    <label for="graduate_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">ปีที่จบการศึกษา</label> <span style="color: red;">*</span> <input class="form-control" type="text" name="graduate_applicant'+ counter +'" id="graduate_applicant'+ counter +'"><span class="myErrors"></span>\
                  </div>\
                  <div class="form-group col-md-2">\
                    <label for="GPA_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">เกรดเฉลี่ย</label> <span style="color: red;">*</span> <input class="form-control" type="text" name="GPA_applicant'+ counter +'" id="GPA_applicant'+ counter +'"><span class="myErrors"></span>\
                  </div>\
               </div>\
               <div class="form-row">\
                  <div class="form-group col-md-5">\
                    <label for="Transcript_applicant'+ counter +'" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">ใบแสดงผลการเรียน (Transcript)</label> <span style="color: red;">*</span>\ <div class=""><input type="file" class="Transcript_applicant'+ counter +'" name="Transcript_applicant'+ counter +'" id="Transcript_applicant'+ counter +'" style="cursor: pointer;" accept=".jpg,.jpeg,.png,.pdf"><label class="custom-file-label" for="Transcript_applicant'+ counter +'"><span class="SukhumvitSet" style="color: red; font-size: 14px;">ไฟล์ .jpg .png หรือ .pdf (ขนาดไฟล์ไม่เกิน 1 MB)</span></label>\  \ <span class="myErrors"></span>\
                  </div>\
               </div>\<hr/>\ ');

      newTextBoxDiv.appendTo("#TextBoxesGroup");
         
      counter++;
       });

       $("#removeButton").click(function () {
      if(counter==2){
           alert("ไม่สามารถลบได้");
           return false;
         }   

      counter--;

         $("#TextBoxDiv" + counter).remove();

       });

  });
</script>

</head>
<body>
   <form name="myForm" id ="myForm" method="post" action="" role="form" enctype="multipart/form-data">
      <div class="col-md-12 mt-2 mb-2">
            <div class="form-row">
               <div class="form-group col-md-2">
                  <label for="education_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">ระดับการศึกษาสูงสุด </label> <span style="color: red;">*</span>
                  <input class="form-control" type="text" name="education_applicant" id="education_applicant">
                  <span class="myErrors"></span>
               </div>
               <div class="form-group col-md-3">
                  <label for="academy_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">สถาบันการศึกษา<span style="color: red;">*</span></label>
                  <input class="form-control" type="text" name="academy_applicant" id="academy_applicant">
                  <span class="myErrors"></span>
               </div>
               <div class="form-group col-md-3">
                  <label for="major_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">สาขาวิชา <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" name="major_applicant" id="major_applicant">
                  <span class="myErrors"></span>
               </div>
               <div class="form-group col-md-2">
                  <label for="graduate_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">ปีที่จบการศึกษา <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" name="graduate_applicant" id="graduate_applicant" maxlength="4" onkeypress="return isNumber(event);">
                  <span class="myErrors"></span>
               </div>
               <div class="form-group col-md-2">
                  <label for="GPA_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">เกรดเฉลี่ย <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" name="GPA_applicant" id="GPA_applicant" maxlength="4" onkeypress="return isNumber(event);">
                  <span class="myErrors"></span>
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-5">
                  <label for="Transcript_applicant" class="font-weight-bold SukhumvitSet" style="color:#1976d2; font-size: 18px;">ใบแสดงผลการเรียน (Transcript)</label> <span style="color: red;">*</span>
                  <div class="">
                     <input type="file" class="Transcript_applicant" name="Transcript_applicant" id="Transcript_applicant" style="cursor: pointer;" accept=".jpg,.jpeg,.png,.pdf">
                     <label class="custom-file-label" for="Transcript_applicant"><span class="SukhumvitSet" style="color: red; font-size: 14px;">ไฟล์ .jpg .png หรือ .pdf (ขนาดไฟล์ไม่เกิน 1 MB)</span> </label>
                     <span class="myErrors"></span>
                  </div>
               </div>
            </div>
            <?php /*
            <div class="form-row">
               <div class="form-group">
                   <label for="upload" class="btn btn-sm btn-primary">Upload Image</label>
                  <input type="file" class="text-center form-control-file custom_file" id="upload" name="user_image">
                  <label for="file_default">No File Choosen </label>
                  <label for="file_name"><b></b></label>
               </div>
            </div>
            */?>
            <hr/>
            <div id='TextBoxesGroup'></div>
      </div>
      <script type="text/javascript">
         ///////////////////  check Type file class Transcript_applicant ////////////////////
         var uploadField = document.getElementById("Transcript_applicant");
         $('#Transcript_applicant').show();
         uploadField.onchange = function() {
            if(this.files[0].size > 1024*1024){
               alert("ไฟล์คุณมีขนาดเกิน 1 MB");
               this.value = "";
               return false;
            };
         };
         $('#Transcript_applicant').on("change",function(){
            var _files = $(this)[0].files;
            var _listFileName = "";
            if(_files.length>0){
               var _fileName = [];
               $.each(_files,function(k,v){
                  _fileName[k] = v.name;
               });
               _listFileName = _fileName.join(",");
            }
            $(this).next("label").text(_listFileName);
         });
         ///////////////////  check Type file class Transcript_applicant ////////////////////
         

         ///////////////////  check Type file class Transcript_applicant2 ////////////////////
         var uploadField = document.getElementById("Transcript_applicant2");
         $('#Transcript_applicant2').show();
         uploadField.onchange = function() {
            if(this.files[0].size > 1024*1024){
               alert("ไฟล์คุณมีขนาดเกิน 1 MB");
               this.value = "";
               return false;
            };
         };
         $('.Transcript_applicant2').on("change",function(){
            var _files = $(this)[0].files;
            var _listFileName = "";
            if(_files.length>0){
               var _fileName = [];
               $.each(_files,function(k,v){
                  _fileName[k] = v.name;
               });
               _listFileName = _fileName.join(",");
            }
            $(this).next("label").text(_listFileName);
         });
         ///////////////////  check Type file class Transcript_applicant2 ////////////////////
         
         
         ///////////////////  check Type file class Transcript_applicant3 ////////////////////
         var uploadField = document.getElementById("Transcript_applicant3");
         uploadField.onchange = function() {
            if(this.files[0].size > 1024*1024){
               alert("ไฟล์คุณมีขนาดเกิน 1 MB");
               this.value = "";
               return false;
            };
         };
         $('.Transcript_applicant3').on("change",function(){
            var _files = $(this)[0].files;
            var _listFileName = "";
            if(_files.length>0){
               var _fileName = [];
               $.each(_files,function(k,v){
                  _fileName[k] = v.name;
               });
               _listFileName = _fileName.join(",");
            }
            $(this).next("label").text(_listFileName);
         });
         ///////////////////  check Type file class Transcript_applicant3 ////////////////////
      </script>
      <div class="col-md-12 mt-2 mb-2">
         <div class="form-row">
            <button type="button" class="btn btn-md btn-primary" style="width: 100px;" id="addMore"><i class="fa fa-plus" aria-hidden="true">Add</i></button>
            <button type="button" class="btn btn-md btn-danger" style="width: 100px; margin-left: 5px;" id="removeButton"><i class="fa fa-plus" aria-hidden="true">Remove</i></button>
            <input type="submit" name="testsave" class="btn btn-success" style="margin-left: 5px;" value="SUBMIT"/>
         </div>
      </div>
   </form>
</body>
</html>
แนบไฟล์
checkfile1mb.jpg
ตัวอย่างรูปภาพประกอบ
checkfile1mb.jpg (355.98 KiB) เปิดดู 30 ครั้ง

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 8580
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามเกี่ยวกับการตรวจสอบขนาดของ File หลังจากเพิ่มฟอร์มหน่อยครับ

โพสต์โดย tsukasaz » 06/12/2018 11:18 am

เท่าที่ดูโค้ด ใช้ jQuery ในการตรวจสอบไฟล์ การอ้างอิงปุ่มหรือช่องที่ใช้อัพโหลดของคุณใช้เป็น # ซึ่งก็หมายถึง ไอดี

ตามหลักแล้วในหน้าเว็บหนึ่งหน้า ไม่สามารถมีไอดีชื่อซ้ำกันได้ครับ ถ้ามีซ้ำ มันจะอ่านแค่ตัวเดียวที่เจอ เพราะฉะนั้นการแก้ไข อาจจะเปลี่ยนไปใช้ . หรือ คลาส แทน
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)


  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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

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