สอบถามว่า ต้องเขียน Code อย่างไร จึงจะกำหนดช่อง Excel แบบกำหนดเป็นหลายช่อง เช่น A2:C2 ตามตัวอย่างใน link http:/

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามว่า ต้องเขียน Code อย่างไร จึงจะกำหนดช่อง Excel แบบกำหนดเป็นหลายช่อง เช่น A2:C2 ตามตัวอย่างใน link http:/

สอบถามว่า ต้องเขียน Code อย่างไร จึงจะกำหนดช่อง Excel แบบกำหนดเป็นหลายช่อง เช่น กำหนดช่อง Excel ที่ต้องการจะดึงข้อมูลเป็นช่อง A2:C2 (A2 ถึง C2) แล้วเอามากรอกที่ช่อง <input type="text" id="selectcell1" name="selectcell1"> / <input type="text" id="selectcell2" name="selectcell2"> / <input type="text" id="selectcell3" name="selectcell3"> (กรอกคำว่า Hello / is my Full / World ตามไฟล์ excelimport2.xlsx) ตามลำดับ และตามตัวอย่างใน link http://niik.in/que_3017_6740 ได้ครับ

Screenshot ที่เขียนโครงสร้าง ให้ต้องการ กำหนดช่อง Excel แบบกำหนดเป็นหลายช่อง เช่น A2:C2 (A2 ถึง C2) แล้วเอามากรอกที่ช่อง <input type="text" id="selectcell1" name="selectcell1"> / <input type="text" id="selectcell2" name="selectcell2"> / <input type="text" id="selectcell3" name="selectcell3"> (กรอกคำว่า Hello / is my Full / World ตามไฟล์ excelimport2.xlsx) ตามลำดับ แต่เมื่อ Import Excel file แล้ว กรอกแค่ Hello / World (ขึ้นแค่ช่อง <input type="text" id="selectcell1" name="selectcell1"> / <input type="text" id="selectcell2" name="selectcell2">) ไม่ขึ้นกรอกคำว่า Hello / is my Full / World (ขึ้นครบทุกช่อง ทั้ง <input type="text" id="selectcell1" name="selectcell1"> / <input type="text" id="selectcell2" name="selectcell2"> / <input type="text" id="selectcell3" name="selectcell3">) ครับ

ชุดไฟล์ + Code ทั้งหมดครับ

1. excelimport.php

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
	<style>
	h2,h4 {display: inline;}
	</style>
</head>
  
<body>

<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">

	<details>
		<summary>กรอกช่อง Excel ที่ต้องการจะเลือก</summary>
		<br><h4 for="selectcell1">ช่อง Excel ที่ต้องการจะเลือกในส่วนช่องเริ่มต้น : </h4><input type="text" id="selectcell1" name="selectcell1"><br><br>
		<h4 for="selectcell2">ช่อง Excel ที่ต้องการจะเลือกในส่วนช่องสุดท้าย : </h4><input type="text" id="selectcell2" name="selectcell2">
	</details><br>

	<h2 for="myfile1">Select files : </h2><input type="file" name="excelFile" id="excelFile" /><br><br>
	<h2 for="fname">First name : </h2><input type="text" id="fname" name="fname"><br><br>
	<h2 for="lname">Middle name : </h2><input type="text" id="lname" name="lname"><br><br>
	<h2 for="lname">Last name : </h2><input type="text" id="mname" name="mname"><br><br>
  <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">
$(function(){
      
      
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล        
    $("#excelFile").on("change",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
          
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($("#myform1")[0]);
  
        // ส่งค่าแบบ POST ไปยังไฟล์ read_excel.php รูปแบบ ajax แบบเต็ม
        $.ajax({
            url: 'read_excel.php',
            type: 'POST',
            data: formData,
            /*async: false,*/
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
/*              การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie 
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik         */
				
				$('#selectcell1').val($('#selectcell1').val().toUpperCase());
				$('#selectcell2').val($('#selectcell2').val().toUpperCase());
				
				if($("#selectcell1").val() != ""){
				$("#fname").val(eval("data." + $("#selectcell1").val()));
				}
				if($("#selectcell2").val() != ""){
				$("#lname").val(eval("data." + $("#selectcell2").val()));
				}
				if($("#selectcell3").val() != ""){
				$("#mname").val(eval("data." + $("#selectcell3").val()));
				}
        });     
    });   
});
</script>
</body>
</html>

2. read_excel.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
/** Error reporting */
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
date_default_timezone_set('Asia/Bangkok');
// http://php.net/manual/en/timezones.php
require_once("PHPExcel/Classes/PHPExcel.php");
?>
<?php 
if(isset($_FILES['excelFile']['name']) && $_FILES['excelFile']['name']!=""){
    $tmpFile = $_FILES['excelFile']['tmp_name'];  
    $fileName = $_FILES['excelFile']['name'];  // เก็บชื่อไฟล์
    $_fileup = $_FILES['excelFile'];
    $info = pathinfo($fileName);
    $allow_file = array("csv","xls","xlsx");
/*  print_r($info);         // ข้อมูลไฟล์   
    print_r($_fileup);*/
    if($fileName!="" && in_array($info['extension'],$allow_file)){
        // อ่านไฟล์จาก path temp ชั่วคราวที่เราอัพโหลด
        $objPHPExcel = PHPExcel_IOFactory::load($tmpFile);      
               
               
        // ดึงข้อมูลของแต่ละเซลในตารางมาไว้ใช้งานในรูปแบบตัวแปร array
        $cell_collection = $objPHPExcel->getActiveSheet()->getCellCollection();
                
        // วนลูปแสดงข้อมูล
        $v=1;
        $json_data = array();
        foreach ($cell_collection as $cell) {
            // ค่าสำหรับดูว่าเป็นคอลัมน์ไหน เช่น A B C ....
            $column = $objPHPExcel->getActiveSheet()->getCell($cell)->getColumn();
            // คำสำหรับดูว่าเป็นแถวที่เท่าไหร่ เช่น 1 2 3 .....
            $row = $objPHPExcel->getActiveSheet()->getCell($cell)->getRow();
            // ค่าของข้อมูลในเซลล์นั้นๆ เช่น A1 B1 C1 ....
            $data_value = $objPHPExcel->getActiveSheet()->getCell($cell)->getValue();          
                   
            // เท่านี้เราก็สามารถแสดงข้อมูลจากการอ่านไฟล์ได้แล้ว และสามารถนำข้อมูลเหล่านี้
            // ทำการบันทักลงฐานข้อมูล หรือแสดงได้เลย
            $json_data["$column$row"] = $data_value;
//            echo $v." ----  ".$data_value."<br>";
             $v++;
        }       
         // แปลง array เป็นรูปแบบ json string  
        if(isset($json_data)){  
            $json= json_encode($json_data);    
            if(isset($_GET['callback']) && $_GET['callback']!=""){    
            echo $_GET['callback']."(".$json.");";        
            }else{    
            echo $json;    
            }    
        }        
    }
} 
?>

3. excelimport2.xlsx - http://doanga2007.github.io/excelimport2.xlsx

4. PHPExcel ซึ่งโหลดจากเว็บ https://github.com/PHPOffice/PHPExcel/ ซึ่งมีโครงสร้างของไฟล์ทั้งหมด ดังนี้ครับ

Sumate Mephokkij f('ip_que'))?> 17-03-2020 12:05:23

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองศึกษาแนวทางนี้ดูเป็นแนวทาง

// จำลองค่าจาก input element เริ่มต้น และสิ้นสุด
var cellStart = "A2";
var cellEnd = "C2";

// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
var  charStart = cellStart.replace(/[0-9]/,'');  // A
var  charEnd = cellEnd.replace(/[0-9]/,'');  // C
// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt()
var rowNum = parseInt(cellStart.replace(/[A-Z]/,'')); // 2

// ฟังก์ชั่นสร้าง array range ตัวอย่าง เช่น range("A","C")  จะได้ ["A","B","C"];
function range(start,stop) {
  var result=[];
  for (var idx=start.charCodeAt(0),end=stop.charCodeAt(0); idx <=end; ++idx){
    result.push(String.fromCharCode(idx));
  }
  return result;
};

// วนลูป Array ตัวอักษร เพื่อใช้ อ้างอิงข้อมูล
range(charStart, charEnd).map((value, key) => {
    console.log("data."  value + rowNum);
    var dataValue = eval("data."  value + rowNum);
	if(value == "A"){
		// นำค่า dataValue ไปใช้งานกับ element ที่ต้องการ
	}
	if(value == "B"){
		// นำค่า dataValue ไปใช้งานกับ element ที่ต้องการ
	}	
});

เราสามารถใช้การวนลูป Array ด้วยคำสั่ง ของ jQuery ดังนี้แทนได้

// หรือใช้รูปแบบการวนลูป array ของ jquery
$.each(range(charStart, charEnd), function( key, value ) {
    console.log("data."  value + rowNum);
    var dataValue = eval("data."  value + rowNum);
	if(value == "A"){
		// นำค่า dataValue ไปใช้งานกับ element ที่ต้องการ
	}
	if(value == "B"){
		// นำค่า dataValue ไปใช้งานกับ element ที่ต้องการ
	}	
});

การนำค่า dataValue ไปใช้งาน นอกจากเราจะกำหนดให้ element ที่ต้องการแต่ละตัวตามที่กำหนดแล้ว

เราสามารถอ้างอิง โดยไม่ต้องสร้างเงื่อนไข if(value == "A"){ เพื่อระบุว่าเป็นข้อมูลของ element ใด

ได้ในกรณีที่ element นั้นๆ นำข้อมูลมาใช้งานสัมพันธ์กับ ลำดับของช่วงข้อมูล นั่นคือ

"A2" "B2" และ "C2" ข้อมูลจะไปแทนใน element1 , element2 และ element3 ตามลำดับ กรณีนี้

เราสามารถใช้งานอ้างอิง css class แล้วใช้ index แทนได้ เช่น

<h2 for="fname">First name : </h2><input type="text" class="my-cssclass" name="fname"><br><br>
<h2 for="lname">Middle name : </h2><input type="text" class="my-cssclass" name="lname"><br><br>
<h2 for="lname">Last name : </h2><input type="text" class="my-cssclass" name="mname"><br><br>

ส่วนของการแสดงข้อมูลก็จะเป็น

// วนลูป Array ตัวอักษร เพื่อใช้ อ้างอิงข้อมูล
range(charStart, charEnd).map((value, key) => {
    console.log("data."  value + rowNum);
    var dataValue = eval("data."  value + rowNum);
	$(".my-cssclass").eq(key).val(dataValue);
});

ตัวอย่างโค้ดเพิ่ม กรณีใช้สำหรับเทียบช่วงในแนวตั้ง เช่น A2 ถึง A5

// จำลองค่าจาก input element เริ่มต้น และสิ้นสุด
var cellStart = "A2";
var cellEnd = "A5";

// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt()
var minV = parseInt(cellStart.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
var maxV = parseInt(cellEnd.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5

// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
var colChar = cellEnd.replace(/[0-9]/,''); สมมติ "A5" จะได้เป็น A

// วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
for ( var c = minV; c <= maxV; c++){
     console.log("data." colChar c); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
     var dataValue = eval("data." colChar c);
}

ตัวอย่างเพิ่ม สมมติให้กรอกข้อมูลมาในรูปแบบ "A2:C2" สามารถแยกเป็น

ค่าเริ่มต้น และสิ้นสุดไว้ในตัวแปร cellStart และ cellEnd ได้ดังนี้

// สมมติค่าข้อมูลจากตัวแปร inputValue
var inputValue = "A2:C2";
var cellStart = inputValue.split(":")[0];
var cellEnd = inputValue.split(":")[1];

ninenik f('ip_ans'))?> 17-03-2020

ความคิดเห็นที่ 2

ขอบคุณครับ สำหรับข้อมูล+คำตอบ Code ใช้งานได้แล้ว ซึ่งปรับปรุงเป็นฉบับของตัวเอง ซึ่งรวมถึงรองรับข้อมูล input จาก id="selectcell..." ซึ่งได้ข้อมูลจากคำตอบใน http://niik.in/que_3017_6739 คือ

if($("#selectcell1").val() != ""){
    $("#fname").val(eval("data." + $("#selectcell1").val()));
}

ได้คำตอบตรงที่ $("#selectcell...").val(); ครับ

พร้อมกับรองรับ การกำหนดช่อง Excel แบบกำหนดเป็นหลายช่อง ในรูปแบบ function range ได้หลาย function range ซึ่งมีชุดไฟล์ + Code ทั้งหมด ดังนี้ครับ

1. excelimport.php

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
	<style>
	h2,h4 {display: inline;}
	</style>
</head>
  
<body>

<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">

	<details>
		<summary>Input Excel cell to select.</summary>
		<br><h4 for="selectcell1">Excel cell to select at first : </h4><input type="text" id="selectcell1" name="selectcell1"><br><br>
		<h4 for="selectcell2">Excel cell to select at final : </h4><input type="text" id="selectcell2" name="selectcell2"><br><br>
		<h4 for="selectcell1">Excel cell to select at first 2 : </h4><input type="text" id="selectcell3" name="selectcell3"><br><br>
		<h4 for="selectcell2">Excel cell to select at final 2 : </h4><input type="text" id="selectcell4" name="selectcell4">
	</details><br>

	<h2 for="myfile1">Select files : </h2><input type="file" name="excelFile" id="excelFile" /><br><br>
	<h2 for="fname">First name : </h2><input type="text" class="my-cssclass" id="fname" name="fname"><br><br>
	<h2 for="lname">Middle name : </h2><input type="text" class="my-cssclass" id="lname" name="lname"><br><br>
	<h2 for="lname">Last name : </h2><input type="text" class="my-cssclass" id="mname" name="mname"><br><br>
	<h2 for="fname">First name 2 : </h2><input type="text" class="my-cssclass2" id="fname2" name="fname2"><br><br>
	<h2 for="lname">Middle name 2 : </h2><input type="text" class="my-cssclass2" id="lname2" name="lname2"><br><br>
	<h2 for="lname">Last name 2 : </h2><input type="text" class="my-cssclass2" id="mname2" name="mname2"><br><br>
  <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">
$(function(){
      
      
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล        
    $("#excelFile").on("change",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
          
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($("#myform1")[0]);
  
        // ส่งค่าแบบ POST ไปยังไฟล์ read_excel.php รูปแบบ ajax แบบเต็ม
        $.ajax({
            url: 'read_excel.php',
            type: 'POST',
            data: formData,
            /*async: false,*/
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
/*              การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie 
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik         */
				
		$('#selectcell1').val($('#selectcell1').val().toUpperCase());
		$('#selectcell2').val($('#selectcell2').val().toUpperCase());
		$('#selectcell3').val($('#selectcell3').val().toUpperCase());
		$('#selectcell4').val($('#selectcell4').val().toUpperCase());
				
		// จำลองค่าจาก input element เริ่มต้น และสิ้นสุด
		var cellStart = $("#selectcell1").val();
		var cellEnd = $("#selectcell2").val();
		
		var cellStart2 = $("#selectcell3").val();
		var cellEnd2 = $("#selectcell4").val();
 
		// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
		var charStart = cellStart.replace(/[0-9]/,'');  // A
		var charEnd = cellEnd.replace(/[0-9]/,'');  // C
		// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt()
		var rowNum = parseInt(cellStart.replace(/[A-Z]/,'')); // 2
		
		// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
		var charStart2 = cellStart2.replace(/[0-9]/,'');  // A
		var charEnd2 = cellEnd2.replace(/[0-9]/,'');  // C
		// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt()
		var rowNum2 = parseInt(cellStart2.replace(/[A-Z]/,'')); // 2
 
		// ฟังก์ชั่นสร้าง array range ตัวอย่าง เช่น range("A","C")  จะได้ ["A","B","C"];
		function range(start,stop) {
			var result=[];
			for (var idx=start.charCodeAt(0),end=stop.charCodeAt(0); idx <=end; ++idx){
			result.push(String.fromCharCode(idx));
		}
		return result;
		};
 
		// วนลูป Array ตัวอักษร เพื่อใช้ อ้างอิงข้อมูล
		range(charStart, charEnd).map((value, key) => {
			console.log("data." + value + rowNum);
			var dataValue = eval("data." + value + rowNum);
			$(".my-cssclass").eq(key).val(dataValue);
		});
		
		// วนลูป Array ตัวอักษร เพื่อใช้ อ้างอิงข้อมูล
		range(charStart2, charEnd2).map((value2, key2) => {
			console.log("data." + value2 + rowNum2);
			var dataValue2 = eval("data." + value2 + rowNum2);
			$(".my-cssclass2").eq(key2).val(dataValue2);
		});
		
        });     
    });   
});
</script>
</body>
</html>

2. read_excel.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
/** Error reporting */
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
date_default_timezone_set('Asia/Bangkok');
// http://php.net/manual/en/timezones.php
require_once("PHPExcel/Classes/PHPExcel.php");
?>
<?php 
if(isset($_FILES['excelFile']['name']) && $_FILES['excelFile']['name']!=""){
    $tmpFile = $_FILES['excelFile']['tmp_name'];  
    $fileName = $_FILES['excelFile']['name'];  // เก็บชื่อไฟล์
    $_fileup = $_FILES['excelFile'];
    $info = pathinfo($fileName);
    $allow_file = array("csv","xls","xlsx");
/*  print_r($info);         // ข้อมูลไฟล์   
    print_r($_fileup);*/
    if($fileName!="" && in_array($info['extension'],$allow_file)){
        // อ่านไฟล์จาก path temp ชั่วคราวที่เราอัพโหลด
        $objPHPExcel = PHPExcel_IOFactory::load($tmpFile);      
                
                
        // ดึงข้อมูลของแต่ละเซลในตารางมาไว้ใช้งานในรูปแบบตัวแปร array
        $cell_collection = $objPHPExcel->getActiveSheet()->getCellCollection();
                 
        // วนลูปแสดงข้อมูล
        $v=1;
        $json_data = array();
        foreach ($cell_collection as $cell) {
            // ค่าสำหรับดูว่าเป็นคอลัมน์ไหน เช่น A B C ....
            $column = $objPHPExcel->getActiveSheet()->getCell($cell)->getColumn();
            // คำสำหรับดูว่าเป็นแถวที่เท่าไหร่ เช่น 1 2 3 .....
            $row = $objPHPExcel->getActiveSheet()->getCell($cell)->getRow();
            // ค่าของข้อมูลในเซลล์นั้นๆ เช่น A1 B1 C1 ....
            $data_value = $objPHPExcel->getActiveSheet()->getCell($cell)->getValue();          
                    
            // เท่านี้เราก็สามารถแสดงข้อมูลจากการอ่านไฟล์ได้แล้ว และสามารถนำข้อมูลเหล่านี้
            // ทำการบันทักลงฐานข้อมูล หรือแสดงได้เลย
            $json_data["$column$row"] = $data_value;
//            echo $v." ----  ".$data_value."<br>";
             $v++;
        }       
         // แปลง array เป็นรูปแบบ json string  
        if(isset($json_data)){  
            $json= json_encode($json_data);    
            if(isset($_GET['callback']) && $_GET['callback']!=""){    
            echo $_GET['callback']."(".$json.");";        
            }else{    
            echo $json;    
            }    
        }        
    }
} 
?>

3. excelimport3.xlsx - http://doanga2007.github.io/excelimport3.xlsx

4. PHPExcel ซึ่งโหลดจากเว็บ https://github.com/PHPOffice/PHPExcel/ ซึ่งมีโครงสร้างของไฟล์ทั้งหมด ดังนี้ครับ

Screenshot ครับ

Sumate Mephokkij f('ip_ans'))?> 18-03-2020 13:44

ความคิดเห็นที่ 3

สอบถามกับคุณ Ninenik เพิ่มเติมว่า ถ้าจะเขียน Code ให้รองรับกับ กรณีใช้สำหรับเทียบช่วงในแนวตั้ง เช่น A2 ถึง A5 แล้วใช้คู่กับ class="my-cssclass" ได้ เช่น

<h2 for="fname">First name : </h2><input type="text" class="my-cssclass" name="fname"><br><br>
<h2 for="lname">Middle name : </h2><input type="text" class="my-cssclass" name="lname"><br><br>
<h2 for="lname">Last name : </h2><input type="text" class="my-cssclass" name="mname"><br><br>

ควรใช้วิธีไหน เพราะลองเขียน Code ตามตัวอย่าง Code ที่ลงไว้แล้ว ไม่ยอมกรอกลง

input form แบบเดียวกับกรณีใช้สำหรับเทียบช่วงในแนวนอน ที่ทำได้แล้ว ในความคิดเห็นที่ 2 ครับ

1. excelimport.php

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
	<style>
	h2,h4 {display: inline;}
	</style>
</head>
  
<body>

<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">

	<details>
		<summary>Input Excel cell to select.</summary>
		<br><h4 for="selectcell1">Excel cell to select at first : </h4><input type="text" id="selectcell1" name="selectcell1"><br><br>
		<h4 for="selectcell2">Excel cell to select at final : </h4><input type="text" id="selectcell2" name="selectcell2"><br><br>
		<h4 for="selectcell1">Excel cell to select at first 2 : </h4><input type="text" id="selectcell3" name="selectcell3"><br><br>
		<h4 for="selectcell2">Excel cell to select at final 2 : </h4><input type="text" id="selectcell4" name="selectcell4">
	</details><br>

	<h2 for="myfile1">Select files : </h2><input type="file" name="excelFile" id="excelFile" /><br><br>
	<h2 for="fname">First name : </h2><input type="text" class="my-cssclass" id="fname" name="fname"><br><br>
	<h2 for="lname">Middle name : </h2><input type="text" class="my-cssclass" id="lname" name="lname"><br><br>
	<h2 for="lname">Last name : </h2><input type="text" class="my-cssclass" id="mname" name="mname"><br><br>
	<h2 for="fname">First name 2 : </h2><input type="text" class="my-cssclass2" id="fname2" name="fname2"><br><br>
	<h2 for="lname">Middle name 2 : </h2><input type="text" class="my-cssclass2" id="lname2" name="lname2"><br><br>
	<h2 for="lname">Last name 2 : </h2><input type="text" class="my-cssclass2" id="mname2" name="mname2"><br><br>
  <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">
$(function(){
      
      
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล        
    $("#excelFile").on("change",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
          
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($("#myform1")[0]);
  
        // ส่งค่าแบบ POST ไปยังไฟล์ read_excel.php รูปแบบ ajax แบบเต็ม
        $.ajax({
            url: 'read_excel.php',
            type: 'POST',
            data: formData,
            /*async: false,*/
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
		/*  การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie 
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik  */
				
		$('#selectcell1').val($('#selectcell1').val().toUpperCase());
		$('#selectcell2').val($('#selectcell2').val().toUpperCase());
		$('#selectcell3').val($('#selectcell3').val().toUpperCase());
		$('#selectcell4').val($('#selectcell4').val().toUpperCase());
		
		// จำลองค่าจาก input element เริ่มต้น และสิ้นสุด แบบแนวตั้งครับ
		var cellStart = $("#selectcell1").val();
		var cellEnd = $("#selectcell2").val();
		
		var cellStart2 = $("#selectcell3").val();
		var cellEnd2 = $("#selectcell4").val();
		
		// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt() 
		var minV = parseInt(cellStart.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
		var maxV = parseInt(cellEnd.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5
 
		// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
		var colChar = cellEnd.replace(/[0-9]/,''); // สมมติ "A5" จะได้เป็น A
		
		// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt()
		var minV2 = parseInt(cellStart2.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
		var maxV2 = parseInt(cellEnd2.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5
 
		// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
		var colChar2 = cellEnd2.replace(/[0-9]/,''); // สมมติ "A5" จะได้เป็น A
 
		// วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
		for ( var c = minV; c <= maxV; c++){
			console.log("data." + colChar + c); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
			var dataValue = eval("data." + colChar + c);
			$(".my-cssclass").eq(c).val(dataValue);
		} 
		
		// วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
		for ( var c2 = minV; c2 <= maxV; c2++){
			console.log("data." + colChar2 + c2); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
			var dataValue2 = eval("data." + colChar2 + c2);
			$(".my-cssclass2").eq(c2).val(dataValue2);
		}

        });     
    });   
});
</script>
</body>
</html>

2. read_excel.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
/** Error reporting */
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
date_default_timezone_set('Asia/Bangkok');
// http://php.net/manual/en/timezones.php
require_once("PHPExcel/Classes/PHPExcel.php");
?>
<?php 
if(isset($_FILES['excelFile']['name']) && $_FILES['excelFile']['name']!=""){
    $tmpFile = $_FILES['excelFile']['tmp_name'];  
    $fileName = $_FILES['excelFile']['name'];  // เก็บชื่อไฟล์
    $_fileup = $_FILES['excelFile'];
    $info = pathinfo($fileName);
    $allow_file = array("csv","xls","xlsx");
/*  print_r($info);         // ข้อมูลไฟล์   
    print_r($_fileup);*/
    if($fileName!="" && in_array($info['extension'],$allow_file)){
        // อ่านไฟล์จาก path temp ชั่วคราวที่เราอัพโหลด
        $objPHPExcel = PHPExcel_IOFactory::load($tmpFile);      
                 
                 
        // ดึงข้อมูลของแต่ละเซลในตารางมาไว้ใช้งานในรูปแบบตัวแปร array
        $cell_collection = $objPHPExcel->getActiveSheet()->getCellCollection();
                  
        // วนลูปแสดงข้อมูล
        $v=1;
        $json_data = array();
        foreach ($cell_collection as $cell) {
            // ค่าสำหรับดูว่าเป็นคอลัมน์ไหน เช่น A B C ....
            $column = $objPHPExcel->getActiveSheet()->getCell($cell)->getColumn();
            // คำสำหรับดูว่าเป็นแถวที่เท่าไหร่ เช่น 1 2 3 .....
            $row = $objPHPExcel->getActiveSheet()->getCell($cell)->getRow();
            // ค่าของข้อมูลในเซลล์นั้นๆ เช่น A1 B1 C1 ....
            $data_value = $objPHPExcel->getActiveSheet()->getCell($cell)->getValue();          
                     
            // เท่านี้เราก็สามารถแสดงข้อมูลจากการอ่านไฟล์ได้แล้ว และสามารถนำข้อมูลเหล่านี้
            // ทำการบันทักลงฐานข้อมูล หรือแสดงได้เลย
            $json_data["$column$row"] = $data_value;
//            echo $v." ----  ".$data_value."<br>";
             $v++;
        }       
         // แปลง array เป็นรูปแบบ json string  
        if(isset($json_data)){  
            $json= json_encode($json_data);    
            if(isset($_GET['callback']) && $_GET['callback']!=""){    
            echo $_GET['callback']."(".$json.");";        
            }else{    
            echo $json;    
            }    
        }        
    }
} 
?>

3. excelimport3.xlsx - http://doanga2007.github.io/excelimport3.xlsx

Screenshot ที่แสดงถึง Console ด้วยครับ

ข้อความที่แสดงใน Console ครับ

excelimport.php:55 {A1: "First name :", B1: "Middle name :", C1: "Last name :", A3: "Hello", B3: "is my Full", …}
excelimport.php:89 data.B3
excelimport.php:89 data.B4
excelimport.php:89 data.B5
excelimport.php:96 data.A3
excelimport.php:96 data.A4
excelimport.php:96 data.A5

Sumate Mephokkij f('ip_ans'))?> 19-03-2020 10:01

ความคิดเห็นที่ 4

วิธีการปรับใช้น่าจะถูกต้องแล้ว แต่ตอนนำค่าไปใช้งาน จะไม่สามารถอ้างอิงค่า

จากตัวแปร c หรือ c2 ได้ เพราะค่า c หรือ c2 เป็นลำดับตัวเลข ขงอแถวข้อมูล

ซึ่งอาจจะเป็น 2 3...5.. 6 เป็นลำดับเรียงทั่วไป

แต่สำหรับลำดับของ index ของ element ค่าจะเริ่มต้นที่ 0 และไล่เรียงเป็น 0 1 2 3....

ดังนั้นจึงต้องสร้างตัวแปร มากำหนดค่า index ให้สัมพันธ์ถูกต้อง เพิ่มเป็น


var idx  = 0;
for ( var c = minV; c <= maxV; c++){
    console.log("data." + colChar + c); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
    var dataValue = eval("data." + colChar + c);
    $(".my-cssclass").eq(idx).val(dataValue);
    idx++;
}

ninenik f('ip_ans'))?> 19-03-2020

ความคิดเห็นที่ 5

ขอบคุณครับ สำหรับคำตอบเพิ่มเติม ในเรื่อง กรณีใช้สำหรับเทียบช่วงในแนวตั้ง และตอนนี้ Code ใช้งานได้แล้ว ซึ่งปรับปรุงเป็นฉบับของตัวเอง ซึ่งมีชุดไฟล์ + Code ทั้งหมด ดังนี้ครับ

1. excelimport.php

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
	<style>
	h2,h4 {display: inline;}
	</style>
</head>
  
<body>

<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">

	<details>
		<summary>Input Excel cell to select.</summary>
		<br><h4 for="selectcell1">Excel cell to select at first : </h4><input type="text" id="selectcell1" name="selectcell1"><br><br>
		<h4 for="selectcell2">Excel cell to select at final : </h4><input type="text" id="selectcell2" name="selectcell2"><br><br>
		<h4 for="selectcell1">Excel cell to select at first 2 : </h4><input type="text" id="selectcell3" name="selectcell3"><br><br>
		<h4 for="selectcell2">Excel cell to select at final 2 : </h4><input type="text" id="selectcell4" name="selectcell4">
	</details><br>

	<h2 for="myfile1">Select files : </h2><input type="file" name="excelFile" id="excelFile" /><br><br>
	<h2 for="fname">First name : </h2><input type="text" class="my-cssclass" id="fname" name="fname"><br><br>
	<h2 for="lname">Middle name : </h2><input type="text" class="my-cssclass" id="lname" name="lname"><br><br>
	<h2 for="lname">Last name : </h2><input type="text" class="my-cssclass" id="mname" name="mname"><br><br>
	<h2 for="fname">First name 2 : </h2><input type="text" class="my-cssclass2" id="fname2" name="fname2"><br><br>
	<h2 for="lname">Middle name 2 : </h2><input type="text" class="my-cssclass2" id="lname2" name="lname2"><br><br>
	<h2 for="lname">Last name 2 : </h2><input type="text" class="my-cssclass2" id="mname2" name="mname2"><br><br>
  <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">
$(function(){
      
      
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล        
    $("#excelFile").on("change",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
          
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($("#myform1")[0]);
  
        // ส่งค่าแบบ POST ไปยังไฟล์ read_excel.php รูปแบบ ajax แบบเต็ม
        $.ajax({
            url: 'read_excel.php',
            type: 'POST',
            data: formData,
            /*async: false,*/
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
		/*  การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie 
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik  */
				
		$('#selectcell1').val($('#selectcell1').val().toUpperCase());
		$('#selectcell2').val($('#selectcell2').val().toUpperCase());
		$('#selectcell3').val($('#selectcell3').val().toUpperCase());
		$('#selectcell4').val($('#selectcell4').val().toUpperCase());
		
		// จำลองค่าจาก input element เริ่มต้น และสิ้นสุด แบบแนวตั้งครับ
		var cellStart = $("#selectcell1").val();
		var cellEnd = $("#selectcell2").val();
		
		var cellStart2 = $("#selectcell3").val();
		var cellEnd2 = $("#selectcell4").val();
		
		// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt() 
		var minV = parseInt(cellStart.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
		var maxV = parseInt(cellEnd.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5
 
		// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
		var colChar = cellEnd.replace(/[0-9]/,''); // สมมติ "A5" จะได้เป็น A
		
		// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt()
		var minV2 = parseInt(cellStart2.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
		var maxV2 = parseInt(cellEnd2.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5
 
		// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
		var colChar2 = cellEnd2.replace(/[0-9]/,''); // สมมติ "A5" จะได้เป็น A
 
		var idx = 0;
		var idx2 = 0;

		// วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
		for ( var c = minV; c <= maxV; c++){
			console.log("data." + colChar + c); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
			var dataValue = eval("data." + colChar + c);
			$(".my-cssclass").eq(idx).val(dataValue);
			idx++;
		} 
		
		// วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
		for ( var c2 = minV2; c2 <= maxV2; c2++){
			console.log("data." + colChar2 + c2); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
			var dataValue2 = eval("data." + colChar2 + c2);
			$(".my-cssclass2").eq(idx2).val(dataValue2);
			idx2++;
		}

        });     
    });   
});
</script>
</body>
</html>

2. read_excel.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
/** Error reporting */
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
date_default_timezone_set('Asia/Bangkok');
// http://php.net/manual/en/timezones.php
require_once("PHPExcel/Classes/PHPExcel.php");
?>
<?php 
if(isset($_FILES['excelFile']['name']) && $_FILES['excelFile']['name']!=""){
    $tmpFile = $_FILES['excelFile']['tmp_name'];  
    $fileName = $_FILES['excelFile']['name'];  // เก็บชื่อไฟล์
    $_fileup = $_FILES['excelFile'];
    $info = pathinfo($fileName);
    $allow_file = array("csv","xls","xlsx");
/*  print_r($info);         // ข้อมูลไฟล์   
    print_r($_fileup);*/
    if($fileName!="" && in_array($info['extension'],$allow_file)){
        // อ่านไฟล์จาก path temp ชั่วคราวที่เราอัพโหลด
        $objPHPExcel = PHPExcel_IOFactory::load($tmpFile);      
                  
                  
        // ดึงข้อมูลของแต่ละเซลในตารางมาไว้ใช้งานในรูปแบบตัวแปร array
        $cell_collection = $objPHPExcel->getActiveSheet()->getCellCollection();
                   
        // วนลูปแสดงข้อมูล
        $v=1;
        $json_data = array();
        foreach ($cell_collection as $cell) {
            // ค่าสำหรับดูว่าเป็นคอลัมน์ไหน เช่น A B C ....
            $column = $objPHPExcel->getActiveSheet()->getCell($cell)->getColumn();
            // คำสำหรับดูว่าเป็นแถวที่เท่าไหร่ เช่น 1 2 3 .....
            $row = $objPHPExcel->getActiveSheet()->getCell($cell)->getRow();
            // ค่าของข้อมูลในเซลล์นั้นๆ เช่น A1 B1 C1 ....
            $data_value = $objPHPExcel->getActiveSheet()->getCell($cell)->getValue();          
                      
            // เท่านี้เราก็สามารถแสดงข้อมูลจากการอ่านไฟล์ได้แล้ว และสามารถนำข้อมูลเหล่านี้
            // ทำการบันทักลงฐานข้อมูล หรือแสดงได้เลย
            $json_data["$column$row"] = $data_value;
//            echo $v." ----  ".$data_value."<br>";
             $v++;
        }       
         // แปลง array เป็นรูปแบบ json string  
        if(isset($json_data)){  
            $json= json_encode($json_data);    
            if(isset($_GET['callback']) && $_GET['callback']!=""){    
            echo $_GET['callback']."(".$json.");";        
            }else{    
            echo $json;    
            }    
        }        
    }
} 
?>

3. excelimport3.xlsx - http://doanga2007.github.io/excelimport3.xlsx

Screenshot ครับ

Sumate Mephokkij f('ip_ans'))?> 19-03-2020 12:17

ความคิดเห็นที่ 6

เพิ่มเติม : แก้ Bug ตรงที่ regex ของ (/[0-9]/,'') ที่ไม่รองรับเลขตั้งแต่ 10 ขึ้นไป ให้เป็น regex แบบ (/[0-9]+/,''

) เพื่อให้รองรับเลขตั้งแต่ 10 ขึ้นไป แล้วครับ



1. excelimport.php

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
	<style>
	h2,h4 {display: inline;}
	</style>
</head>
  
<body>

<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">

	<details>
		<summary>Input Excel cell to select.</summary>
		<br><h4 for="selectcell1">Excel cell to select at first : </h4><input type="text" id="selectcell1" name="selectcell1"><br><br>
		<h4 for="selectcell2">Excel cell to select at final : </h4><input type="text" id="selectcell2" name="selectcell2"><br><br>
		<h4 for="selectcell1">Excel cell to select at first 2 : </h4><input type="text" id="selectcell3" name="selectcell3"><br><br>
		<h4 for="selectcell2">Excel cell to select at final 2 : </h4><input type="text" id="selectcell4" name="selectcell4">
	</details><br>

	<h2 for="myfile1">Select files : </h2><input type="file" name="excelFile" id="excelFile" /><br><br>
	<h2 for="fname">First name : </h2><input type="text" class="my-cssclass" id="fname" name="fname"><br><br>
	<h2 for="lname">Middle name : </h2><input type="text" class="my-cssclass" id="lname" name="lname"><br><br>
	<h2 for="lname">Last name : </h2><input type="text" class="my-cssclass" id="mname" name="mname"><br><br>
	<h2 for="fname">First name 2 : </h2><input type="text" class="my-cssclass2" id="fname2" name="fname2"><br><br>
	<h2 for="lname">Middle name 2 : </h2><input type="text" class="my-cssclass2" id="lname2" name="lname2"><br><br>
	<h2 for="lname">Last name 2 : </h2><input type="text" class="my-cssclass2" id="mname2" name="mname2"><br><br>
  <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">
$(function(){
      
      
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล        
    $("#excelFile").on("change",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
          
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($("#myform1")[0]);
  
        // ส่งค่าแบบ POST ไปยังไฟล์ read_excel.php รูปแบบ ajax แบบเต็ม
        $.ajax({
            url: 'read_excel.php',
            type: 'POST',
            data: formData,
            /*async: false,*/
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
		/*  การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie 
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik  */
				
		$('#selectcell1').val($('#selectcell1').val().toUpperCase());
		$('#selectcell2').val($('#selectcell2').val().toUpperCase());
		$('#selectcell3').val($('#selectcell3').val().toUpperCase());
		$('#selectcell4').val($('#selectcell4').val().toUpperCase());
		
		// จำลองค่าจาก input element เริ่มต้น และสิ้นสุด แบบแนวตั้งครับ
		var cellStart = $("#selectcell1").val();
		var cellEnd = $("#selectcell2").val();
		
		var cellStart2 = $("#selectcell3").val();
		var cellEnd2 = $("#selectcell4").val();
		
		// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt() 
		var minV = parseInt(cellStart.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
		var maxV = parseInt(cellEnd.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5
 
		// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
		var colChar = cellEnd.replace(/[0-9] /,''); // สมมติ "A5" จะได้เป็น A
		
		// ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt()
		var minV2 = parseInt(cellStart2.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
		var maxV2 = parseInt(cellEnd2.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5
 
		// ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
		var colChar2 = cellEnd2.replace(/[0-9] /,''); // สมมติ "A5" จะได้เป็น A
 
		var idx = 0;
		var idx2 = 0;

		// วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
		for ( var c = minV; c <= maxV; c++){
			console.log("data." + colChar + c); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
			var dataValue = eval("data." + colChar + c);
			$(".my-cssclass").eq(idx).val(dataValue);
			idx++;
		} 
		
		// วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
		for ( var c2 = minV2; c2 <= maxV2; c2++){
			console.log("data." + colChar2 + c2); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
			var dataValue2 = eval("data." + colChar2 + c2);
			$(".my-cssclass2").eq(idx2).val(dataValue2);
			idx2++;
		}

        });     
    });   
});
</script>
</body>
</html>

2. read_excel.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
/** Error reporting */
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
date_default_timezone_set('Asia/Bangkok');
// http://php.net/manual/en/timezones.php
require_once("PHPExcel/Classes/PHPExcel.php");
?>
<?php 
if(isset($_FILES['excelFile']['name']) && $_FILES['excelFile']['name']!=""){
    $tmpFile = $_FILES['excelFile']['tmp_name'];  
    $fileName = $_FILES['excelFile']['name'];  // เก็บชื่อไฟล์
    $_fileup = $_FILES['excelFile'];
    $info = pathinfo($fileName);
    $allow_file = array("csv","xls","xlsx");
/*  print_r($info);         // ข้อมูลไฟล์   
    print_r($_fileup);*/
    if($fileName!="" && in_array($info['extension'],$allow_file)){
        // อ่านไฟล์จาก path temp ชั่วคราวที่เราอัพโหลด
        $objPHPExcel = PHPExcel_IOFactory::load($tmpFile);      
                   
                   
        // ดึงข้อมูลของแต่ละเซลในตารางมาไว้ใช้งานในรูปแบบตัวแปร array
        $cell_collection = $objPHPExcel->getActiveSheet()->getCellCollection();
                    
        // วนลูปแสดงข้อมูล
        $v=1;
        $json_data = array();
        foreach ($cell_collection as $cell) {
            // ค่าสำหรับดูว่าเป็นคอลัมน์ไหน เช่น A B C ....
            $column = $objPHPExcel->getActiveSheet()->getCell($cell)->getColumn();
            // คำสำหรับดูว่าเป็นแถวที่เท่าไหร่ เช่น 1 2 3 .....
            $row = $objPHPExcel->getActiveSheet()->getCell($cell)->getRow();
            // ค่าของข้อมูลในเซลล์นั้นๆ เช่น A1 B1 C1 ....
            $data_value = $objPHPExcel->getActiveSheet()->getCell($cell)->getValue();          
                       
            // เท่านี้เราก็สามารถแสดงข้อมูลจากการอ่านไฟล์ได้แล้ว และสามารถนำข้อมูลเหล่านี้
            // ทำการบันทักลงฐานข้อมูล หรือแสดงได้เลย
            $json_data["$column$row"] = $data_value;
//            echo $v." ----  ".$data_value."<br>";
             $v++;
        }       
         // แปลง array เป็นรูปแบบ json string  
        if(isset($json_data)){  
            $json= json_encode($json_data);    
            if(isset($_GET['callback']) && $_GET['callback']!=""){    
            echo $_GET['callback']."(".$json.");";        
            }else{    
            echo $json;    
            }    
        }        
    }
} 
?>

3. excelimport3.xlsx - http://doanga2007.github.io/excelimport3.xlsx

4. PHPExcel ซึ่งโหลดจากเว็บ https://github.com/PHPOffice/PHPExcel/ ซึ่งมีโครงสร้างของไฟล์ทั้งหมด ดังนี้ครับ



		

		Screenshot ครับ

Sumate Mephokkij f('ip_ans'))?> 19-03-2020 16:05

ความคิดเห็นที่ 7

เพิ่มเติม : เนื่องจาก ข้อมูลใน ความคิดเห็นที่ 6 ลืมแก้ regex ของ (/[0-9]/,'') ที่ไม่รองรับเลขตั้งแต่ 10 ขึ้นไป ให้เป็น regex แบบ (/[0-9]+/,'') เพื่อให้รองรับเลขตั้งแต่ 10 ขึ้นไป ตอนนี้แก้ไข Code ทั้งหมด ให้เป็น regex แบบ (/[0-9]+/,'') เพื่อให้รองรับเลขตั้งแต่ 10 ขึ้นไป + [แถม] ปรับปรุง read_excel.php ให้รองรับไฟล์เป็น ("csv","xls","xlsx","XLS","XLSX") ดังนี้ครับ

1. excelimport.php

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
    <style>
    h2,h4 {display: inline;}
    </style>
</head>
   
<body>
 
<form action="" method="post" enctype="multipart/form-data" name="myform1" id="myform1">
 
    <details>
        <summary>Input Excel cell to select.</summary>
        <br><h4 for="selectcell1">Excel cell to select at first : </h4><input type="text" id="selectcell1" name="selectcell1"><br><br>
        <h4 for="selectcell2">Excel cell to select at final : </h4><input type="text" id="selectcell2" name="selectcell2"><br><br>
        <h4 for="selectcell1">Excel cell to select at first 2 : </h4><input type="text" id="selectcell3" name="selectcell3"><br><br>
        <h4 for="selectcell2">Excel cell to select at final 2 : </h4><input type="text" id="selectcell4" name="selectcell4">
    </details><br>
 
    <h2 for="myfile1">Select files : </h2><input type="file" name="excelFile" id="excelFile" /><br><br>
    <h2 for="fname">First name : </h2><input type="text" class="my-cssclass" id="fname" name="fname"><br><br>
    <h2 for="lname">Middle name : </h2><input type="text" class="my-cssclass" id="lname" name="lname"><br><br>
    <h2 for="lname">Last name : </h2><input type="text" class="my-cssclass" id="mname" name="mname"><br><br>
    <h2 for="fname">First name 2 : </h2><input type="text" class="my-cssclass2" id="fname2" name="fname2"><br><br>
    <h2 for="lname">Middle name 2 : </h2><input type="text" class="my-cssclass2" id="lname2" name="lname2"><br><br>
    <h2 for="lname">Last name 2 : </h2><input type="text" class="my-cssclass2" id="mname2" name="mname2"><br><br>
  <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" />
</form>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">
$(function(){
       
       
    // เมื่อฟอร์มการเรียกใช้ evnet submit ข้อมูล        
    $("#excelFile").on("change",function(e){
        e.preventDefault(); // ปิดการใช้งาน submit ปกติ เพื่อใช้งานผ่าน ajax
           
        // เตรียมข้อมูล form สำหรับส่งด้วย  FormData Object
       var formData = new FormData($("#myform1")[0]);
   
        // ส่งค่าแบบ POST ไปยังไฟล์ read_excel.php รูปแบบ ajax แบบเต็ม
        $.ajax({
            url: 'read_excel.php',
            type: 'POST',
            data: formData,
            /*async: false,*/
            cache: false,
            contentType: false,
            processData: false
        }).done(function(data){
                console.log(data);  // ทดสอบแสดงค่า  ดูผ่านหน้า console
        /*  การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie 
                https://www.ninenik.com/content.php?arti_id=692 via @ninenik  */
                 
        $('#selectcell1').val($('#selectcell1').val().toUpperCase());
        $('#selectcell2').val($('#selectcell2').val().toUpperCase());
        $('#selectcell3').val($('#selectcell3').val().toUpperCase());
        $('#selectcell4').val($('#selectcell4').val().toUpperCase());
         
        // จำลองค่าจาก input element เริ่มต้น และสิ้นสุด แบบแนวตั้งครับ
        var cellStart = $("#selectcell1").val();
        var cellEnd = $("#selectcell2").val();
         
        var cellStart2 = $("#selectcell3").val();
        var cellEnd2 = $("#selectcell4").val();
         
        // ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt() 
        var minV = parseInt(cellStart.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
        var maxV = parseInt(cellEnd.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5
  
        // ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
        var colChar = cellEnd.replace(/[0-9] /,''); // สมมติ "A5" จะได้เป็น A
         
        // ใช้คำสั่ง .replace() ตัดตัวอักษรจากข้อความ แล้วแปลงข้อความที่เหลือเป็นตัวเลขด้วย parseInt()
        var minV2 = parseInt(cellStart2.replace(/[A-Z]/,'')); // ได้ค่าเริ่มต้นตัวเลข สมมติ "A2" จะได้เป็น 2
        var maxV2 = parseInt(cellEnd2.replace(/[A-Z]/,''));   // ได้ค่าสิ้นสุดตัวเลข สมมติ "A5" จะได้เป็น 5
  
        // ใช้คำสั่ง .replace() ตัดตัวเลขจากข้อความ เหลือไว้แค่ตัวอักษร
        var colChar2 = cellEnd2.replace(/[0-9] /,''); // สมมติ "A5" จะได้เป็น A
  
        var idx = 0;
        var idx2 = 0;
 
        // วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
        for ( var c = minV; c <= maxV; c++){
            console.log("data." + colChar + c); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
            var dataValue = eval("data." + colChar + c);
            $(".my-cssclass").eq(idx).val(dataValue);
            idx++;
        } 
         
        // วนลูปเพื่ออ้างอิงตำแหน่ง property ของ object ตามช่วงข้อมูล
        for ( var c2 = minV2; c2 <= maxV2; c2++){
            console.log("data." + colChar2 + c2); // จะได้ค่า เป็น "data.A2" , "data.A3"... "data.A5");
            var dataValue2 = eval("data." + colChar2 + c2);
            $(".my-cssclass2").eq(idx2).val(dataValue2);
            idx2++;
        }
 
        });     
    });   
});
</script>
</body>
</html>

2. read_excel.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
/** Error reporting */
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
date_default_timezone_set('Asia/Bangkok');
// http://php.net/manual/en/timezones.php
require_once("PHPExcel/Classes/PHPExcel.php");
?>
<?php 
if(isset($_FILES['excelFile']['name']) && $_FILES['excelFile']['name']!=""){
    $tmpFile = $_FILES['excelFile']['tmp_name'];  
    $fileName = $_FILES['excelFile']['name'];  // เก็บชื่อไฟล์
    $_fileup = $_FILES['excelFile'];
    $info = pathinfo($fileName);
    $allow_file = array("csv","xls","xlsx","XLS","XLSX");
/*  print_r($info);         // ข้อมูลไฟล์   
    print_r($_fileup);*/
    if($fileName!="" && in_array($info['extension'],$allow_file)){
        // อ่านไฟล์จาก path temp ชั่วคราวที่เราอัพโหลด
        $objPHPExcel = PHPExcel_IOFactory::load($tmpFile);      
                   
                   
        // ดึงข้อมูลของแต่ละเซลในตารางมาไว้ใช้งานในรูปแบบตัวแปร array
        $cell_collection = $objPHPExcel->getActiveSheet()->getCellCollection();
                    
        // วนลูปแสดงข้อมูล
        $v=1;
        $json_data = array();
        foreach ($cell_collection as $cell) {
            // ค่าสำหรับดูว่าเป็นคอลัมน์ไหน เช่น A B C ....
            $column = $objPHPExcel->getActiveSheet()->getCell($cell)->getColumn();
            // คำสำหรับดูว่าเป็นแถวที่เท่าไหร่ เช่น 1 2 3 .....
            $row = $objPHPExcel->getActiveSheet()->getCell($cell)->getRow();
            // ค่าของข้อมูลในเซลล์นั้นๆ เช่น A1 B1 C1 ....
            $data_value = $objPHPExcel->getActiveSheet()->getCell($cell)->getValue();          
                       
            // เท่านี้เราก็สามารถแสดงข้อมูลจากการอ่านไฟล์ได้แล้ว และสามารถนำข้อมูลเหล่านี้
            // ทำการบันทักลงฐานข้อมูล หรือแสดงได้เลย
            $json_data["$column$row"] = $data_value;
//            echo $v." ----  ".$data_value."<br>";
             $v++;
        }       
         // แปลง array เป็นรูปแบบ json string  
        if(isset($json_data)){  
            $json= json_encode($json_data);    
            if(isset($_GET['callback']) && $_GET['callback']!=""){    
            echo $_GET['callback']."(".$json.");";        
            }else{    
            echo $json;    
            }    
        }        
    }
} 
?>

3. excelimport3.xlsx - http://doanga2007.github.io/excelimport3.xlsx

4. PHPExcel ซึ่งโหลดจากเว็บ https://github.com/PHPOffice/PHPExcel/ ซึ่งมีโครงสร้างของไฟล์ทั้งหมด ดังนี้ครับ

Screenshot ครับ

Sumate Mephokkij f('ip_ans'))?> 31-03-2020 10:52

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน