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

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

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

tomsmile05
PHP Newbie
PHP Newbie
Posts: 1
Joined: 06/12/2018 9:48 am

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

Post by tomsmile05 » 06/12/2018 10:40 am

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

Code: Select all

<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>
Attachments
ตัวอย่างรูปภาพประกอบ
ตัวอย่างรูปภาพประกอบ
checkfile1mb.jpg (355.98 KiB) Viewed 608 times

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10510
Joined: 18/04/2012 9:39 am

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

Post by tsukasaz » 06/12/2018 11:18 am

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

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

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Programming - PHP”

Who is online

Users browsing this forum: No registered users and 56 guests