Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,529

HOME > PHP > PHP Forum > ติดปัญหาเช็คขนาดไฟล์รูป Validation Multiple ครับ ถ้าส่งมาเป็น id=file[] จะแก้ยังไงครับ





 

ติดปัญหาเช็คขนาดไฟล์รูป Validation Multiple ครับ ถ้าส่งมาเป็น id=file[] จะแก้ยังไงครับ

 



Topic : 132346



โพสกระทู้ ( 170 )
บทความ ( 0 )



สถานะออฟไลน์




ติดปัญหาเช็คขนาดไฟล์รูป Validation Multiple ครับ ถ้าผมส่ง name="file[]" มาเป็นแบบ Multiple จะแก้ จาวาสคริบยังไงครับ

<input type="file" name="file[]" id="file" class="inputbox1" />

ขอบคุณครับ


test.html อันนี้เป็นตัวอย่างแบบ Single อ่ะครับ
<form name="filesizeval" id="filesizeval" method="post" action=""  onSubmit="return validate();">
<input type="file" name="file" id="file" class="inputbox1" />
<br />
<input type="submit" id="button" value="Upload"/>
</form>

<script>
function validate() {
$("#file_error").html("");
$(".inputbox1").css("border-color","#F0F0F0");
var file_size = $('#file')[0].files[0].size;
if(file_size>2097152) {
$("#file_error").html("File size is greater than 2MB. Please upload file below 2MB.");
$(".inputbox1").css("border-color","#FF0000");
return false;
} 
return true;
}
</script>





Tag : PHP









ประวัติการแก้ไข
2018-10-15 21:19:20
2018-10-15 21:21:16
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2018-10-15 21:17:18 By : teedesign View : 140 Reply : 6
 

 

No. 1



โพสกระทู้ ( 3,444 )
บทความ ( 8 )



สถานะออฟไลน์


name="filesizeval" id="filesizeval"
id="filesizeval"

method="post" enctype="multipart/form-data"

Code (JavaScript)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test upload file size.</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
		<div id="file_error"></div>
		<form id="filesizeval" method="post" enctype="multipart/form-data"  onSubmit="return validate();">
			<input type="file" name="file[]" multiple id="file" class="inputbox1" />
			<br />
			<input type="submit" id="button" value="Upload"/>
		</form>




        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script>
			function validate() {
				$("#file_error").html("");
				$(".inputbox1").css("border-color","#F0F0F0");
				var validated = true;
				$.each($('#file')[0].files, function(index, item) {
					// contain item.name, item.size, item.type, item.lastModified, item.webkitRelativePath
					if (item.size > 2097152) {
						$("#file_error").append(item.name + " File size is greater than 2MB. Please upload file below 2MB.<br>");
						$(".inputbox1").css("border-color","#FF0000");
						validated = false;
					}
					console.log(index);
					console.log(item);
				});
				return validated;
			}
		</script>
		
    </body>
</html>







แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-10-15 21:40:00 By : mr.v
 


 

No. 2



โพสกระทู้ ( 170 )
บทความ ( 0 )



สถานะออฟไลน์


พี่ครับผมลองเอาไปใส่ดู มันขึ้น Check File แค่ด้านบนอันเดียวครับ อันอื่นมันไม่ Check ครับ แก้ยังไงดีครับ
อันนี้เป้น Source Code ของผมครับพี่ งมมานานติดอีกนิดเดียวครับพี่ รบกวนอีกทีครับ

ขอบคุณครับ

ssssss

test.html
<form id="validateForm"  method="post" class="form" onSubmit="return validate();" action="<?php echo base_url('guest/tab_advetise'); ?>" enctype="multipart/form-data">
    <div id="row">
      <div class="col col-sm-12 col-md-8 col-lg-7 col-xl-7">
     
     
       <div class="row">
          <div class="col-12 col-sm-12 col-md-12">
            <div class="form-group">
              <label for="exampleInputEmail1">ใส่รูปได้ 6 รูป</label>
              <div id="filediv">
                <div id="filediv2">
                <div id="file_error"></div>
                  <input type="file" name="file[]" id="file" class="inputbox1" oninvalid="this.setCustomValidity('เลือกรูปอัฟโหลด')"
 oninput="setCustomValidity('')" required>
                  <a href="javascript:void(0);" class="remove_field">
                  <button type="button" class="btn btn-danger btn-sm fa fa-times"></button>
                  </a></div>
              </div>
            </div>
            <div id="ddd">
              <button type="button" id="add_more" class="fa fa-picture-o upload" aria-hidden="true">&nbsp;Add More Files</button>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12">
            <input type="submit" value="Submit" id="upload" />
          </div>
        </div>

        
      
      </div>
    </div>
  </form>

<script type="text/javascript">
var abc = 0;
var max_fields = 6;
var x = 1;
$(document).ready(function() {

$('#add_more').click(function(e) {
e.preventDefault();
var filediv    = $("#filediv");
if(x < max_fields){ 
x++;

$(filediv).append('<div id="filediv2"><br><input type="file" name="file[]" class="inputbox1" id="file" required/> <a href="javascript:void(0);" class="remove_field" id="fff"><button type="button" class="btn btn-danger btn-sm fa fa-times"></button></a><span id="file_error"></span></div>');



}else{

alert("อัฟโหลดได้ 6 รูป");
e.preventDefault();

}
});


$(filediv).on("click",".remove_field", function(e){ 
e.preventDefault();
$(this).parent('div').remove();
x--;
});


$('body').on('change', '#file', function(){
if (this.files && this.files[0]) {
abc += 1;
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");

var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);

$(this).hide();

}
});


function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};


});


function validate() {
				$("#file_error").html("");
				$(".inputbox1").css("border-color","#F0F0F0");
				var validated = true;
				$.each($('#file')[0].files, function(index, item) {
					// contain item.name, item.size, item.type, item.lastModified, item.webkitRelativePath
					if (item.size > 2097152) {
						$("#file_error").append(item.name + " File size is greater than 2MB. Please upload file below 2MB.<br>");
						$(".inputbox1").css("border-color","#FF0000");
						validated = false;
					}
					console.log(index);
					console.log(item);
				});
				return validated;
			}
</script> 




ประวัติการแก้ไข
2018-10-15 22:52:16
2018-10-15 22:55:04
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-10-15 22:47:20 By : teedesign
 

 

No. 3



โพสกระทู้ ( 170 )
บทความ ( 0 )



สถานะออฟไลน์


ซ้ำๆครับขออภัย


ประวัติการแก้ไข
2018-10-15 22:48:30
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-10-15 22:47:40 By : teedesign
 


 

No. 4



โพสกระทู้ ( 3,444 )
บทความ ( 8 )



สถานะออฟไลน์


ก็ในตัวอย่างแรกสุดคุณเอามาแค่นั้น มี input file อันเดียว แถม id="file_error" ก็ไม่มี ผมก็ต้องมาเขียนเอาเอง
แล้วที่ว่าจะเอาแบบ input file multiple ผมก็ทำตามนั้นแล้ว เพราะจากโค้ดหัวกระทู้มีมาแค่นั้น ผมก็เลยนึกว่าแค่ปรับเป็น multiple ก็ใส่รูปได้เยอะแยะแล้ว
แต่นี่กลายเป็นคนละเรื่องเลย ไปเอา append input file มาใส่อีก
แถมกดเพิ่มเพื่อ append แต่ละที ตัว id="file_error" ก็ตามมาเพิ่มกันเพียบอีก แล้วมันจะไม่ไปกองอยู่ด้านบนอันเดียวได้ไง?

id attribute ใน html element ทั้งหลายไม่ว่าอะไรก็ตาม หน้านั้นทั้งหน้าควรมี id เดียวและไม่ซ้ำอีก ถ้าจะซ้ำๆให้ใช้ class ไม่ใช่ id.

แล้วถ้าจะเอา input file multiple จะไปเอา add more files ไปใส่เพื่ออะไร?

อันที่ผมทำให้ดูคุณก็ลองเอาไปทดสอบดูเพียวๆว่ามันทำงานได้มั้ย ถ้าได้ก็เลือกเอาละกันว่าจะใช้ input file multiple หรือ input file single แล้วใช้ add more files เพราะจากที่ผมเห็นมันไม่จำเป็นเลยตัวนี้น่ะ.
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-10-16 07:30:45 By : mr.v
 


 

No. 5



โพสกระทู้ ( 7,879 )
บทความ ( 1 )



สถานะออฟไลน์


Code (JavaScript)
function readURL(input, callback ) {
    if (input.files){
		var idx = input.files.length - 1;
		if( input.files[idx]){ 
			var reader = new FileReader();
			reader.onload = e=>{ 
				var img = new Image();
				$(img).attr(src, e.target.result);
				callback(img.width, img.height);
			}
			reader.readAsDataURL(input.files[idx]);
		}
    }
}

$('input[type="file"]).change(e=>{
   readURL(e, (w, h)=>{
       if( w > 600 || h>400){
            alert( 'file size 600 x 400 only');
       }
   })
})


ประยุกต์ เอาเองนะครับ และไม่ได้ ทดสอบ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-10-16 07:45:30 By : Chaidhanan
 


 

No. 6



โพสกระทู้ ( 170 )
บทความ ( 0 )



สถานะออฟไลน์


ลองก่อนนะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-10-16 15:22:53 By : teedesign
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ติดปัญหาเช็คขนาดไฟล์รูป Validation Multiple ครับ ถ้าส่งมาเป็น id=file[] จะแก้ยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่