jquery

#jQuery[2] ทำอัพโหลดไฟล์ด้วย Dropzone JS

สำหรับการพัฒนาเว็บไซต์ที่ต้องยุ่งเกี่ยวกับการอัพโหลดไฟล์เอกสาร ไฟล์รูปภาพแล้วก็คงจะพอหาแหล่งข้อมูลได้ทั่วไป แต่ก็ล้วนแล้วจะต้องมาปรับแต่งโค๊ดเพื่อกรองข้อมูลไฟล์ก่อนจะเข้าไปถึงขั้นตอนการทึกข้อมูลเข้าระบบ โดยต้องให้ความสำคัญกับเรื่องเหล่านี้เสมอ

  • ขนาดไฟล์ที่อนุญาตในการอัพโหลด
  • ประเภทไฟล์ที่อนุญาตในการอัพโหลด
  • การอัพโหลดไฟล์แบบไฟล์เดียว และหลายไฟล์
  • จำนวนไฟล์สูงสุดที่อนุญาตให้อัพโหลดได้ในแต่ละครั้ง
  • ที่คำคัญเลยคือก่อนการที่เราจะบันทึกการอัพโหลด จะให้ review รูปภาพก่อนจะทำได้อย่างไร
  • อื่น ๆ




ปัจจุบันนี้ Javascript ทำได้เกือบทุกอย่างจริง ๆ ทำให้เรื่องการอัพโหลดไฟล์เป็นงานง่ายไปเลย

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dropzone Poolsawat</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<script type="text/javascript">
	var myDropzone = {};
	Dropzone.options.myAwesomeDropzone = {
		url : 'xxxxxx',
		paramName : "fileOther", // ชื่อไฟล์ปลายทางเมื่อ upload แบบ mutiple จะเป็น array
		autoProcessQueue : false,// ใส่เพื่อไม่ให้อัพโหลดทันที หลังจากเลือกไฟล์
		uploadMultiple : true, // อัพโหลดไฟล์หลายไฟล์
		parallelUploads : 10, // ให้ทำงานพร้อมกัน 10 ไฟล์
		maxFiles : 5, // ไฟล์สูงสุด 5 ไฟล์
		addRemoveLinks : true, // อนุญาตให้ลบไฟล์ก่อนการอัพโหลด
		maxFilesize: 2, // MB
		previewsContainer : ".dropzone", // ระบุ element เป้าหลาย
		dictRemoveFile : "Remove", // ชื่อ ปุ่ม remove
		dictCancelUpload : "Cancel", // ชื่อ ปุ่ม ยกเลิก
		dictDefaultMessage : "เลือกรูปภาพ", // ข้อความบนพื้นที่แสดงรูปจะแสดงหลังจากโหลดเพจเสร็จ
		dictFileTooBig : "ไม่อนุญาตให้อัพโหลดไฟล์เกิน 2 MB", //ข้อความแสดงเมื่อเลือกไฟล์ขนาดเกินที่กำหนด		
		acceptedFiles : "image/*", // อนุญาตให้เลือกไฟล์ประเภทรูปภาพได้
		// The setting up of the dropzone
		init : function() {
			myDropzone = this;
			/*this.on("addedfile", function(file) {
				
			}).on("removedfile", function(file) {
				
			}).on("thumbnail", function(file) {
				
			}).on("error", function(file) {
				
			}).on("processing", function(file) {
				
			}).on("uploadprogress", function(file) {
				
			});*/
		}
	}
	
	$(document).ready(function(){
			$('#btnUpload').on('click',function(){
				myDropzone.processQueue();
			});
	});
	
</script>
</head>
<body>
	<div class="dropzone" id="my-awesome-dropzone" style="font-size: 1.5em;">
		<h3 class="dropzone-previews ui"></h3>		
		<div class="fallback">
			<input name="file" type="file" multiple class="form-control" accept="image/jpg" />
		</div>
	</div>
	<button type="button" id="btnUpload">อัพโหลดไฟล์</button>
</body>
</html>

dropzone2




ก็เลยอยากเอาตัวอย่างโค๊ดการอัพโหลดไฟล์มาแบ่งปันกัน

#jQuery[1] ตั้งค่าภาษาไทยให้ Datatable

Datatable

แนะนำการตั้งค่าเครื่องมือต่าง ๆ บน Jquery Datatable ให้เป็นภาษาไทย

Datatable เป็น Plugin ที่พัฒนาจาก Jquery เป็นความสามารถทั้งหมดที่การแสงดข้อมูลผ่านหน้าตารางควรมีแต่โดย Default ของ Datatable นี้จะเป็นภาษาอังกฤษ ซึ่งมันก็ดีแต่ถ้าอยากจะตั้งค่าให้เป็นภาษาไทยละจะทำอย่างไร

ตัวอย่างโค๊ด

<!DOCTYPE html>
<html>
   <head>
    <title>Datatable Thai Language</title>

<link rel="stylesheet" href="[local_path]/css/datatables/dataTables.bootstrap.min.css' ?>">
<link rel="stylesheet" href="[local_path]css/datatables/dataTables.css' ?>">
<link rel="stylesheet" href="[local_path]css/datatables/responsive.bootstrap.min.css' ?>">

<script type="text/javascript" src="[local_path]js/datatables/jquery.dataTables.min.js'?>"></script>
<script type="text/javascript" src="[local_path]js/datatables/dataTables.bootstrap.min.js'?>"></script>
<script type="text/javascript" src="[local_path]js/datatables/dataTables.responsive.min.js'?>"></script>
<script type="text/javascript" src="[local_path]js/datatables/responsive.bootstrap.min.js'?>"></script>

   </head>
<body>

  <table class="bordered table">
    <thead>
      <tr>
      <th>code_id</th>
      <th>name_th</th>
      <th>addr_th</th>
      <th>phone</th>
      <th>email</th>
      <th>contact</th>
      <th>join_date</th>
      <th>#</th>
      <th>#</th>
      </tr>
   </thead>
   <tbody>
<!-- ข้อมูล-->
   </tbody>
</table>

</body>
</html>

<script type="text/javascript">

// เพิ่มส่วนนี้เข้าไปจะถือว่าเป็นการตั้งค่าให้ Datatable เป็น Default ใหม่เลย

$.extend(true, $.fn.dataTable.defaults, {
    "language": {
              "sProcessing": "กำลังดำเนินการ...",
              "sLengthMenu": "แสดง_MENU_ แถว",
              "sZeroRecords": "ไม่พบข้อมูล",
              "sInfo": "แสดง _START_ ถึง _END_ จาก _TOTAL_ แถว",
              "sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 แถว",
              "sInfoFiltered": "(กรองข้อมูล _MAX_ ทุกแถว)",
              "sInfoPostFix": "",
              "sSearch": "ค้นหา:",
              "sUrl": "",
              "oPaginate": {
                            "sFirst": "เิริ่มต้น",
                            "sPrevious": "ก่อนหน้า",
                            "sNext": "ถัดไป",
                            "sLast": "สุดท้าย"
              }
     }
});

// เรียกใช้งาน Datatable function

$('.table').DataTable();

</script>

Datatable_th

เพียงเท่านี่เราก็จะได้หน้าตา Datatable ที่เป็นภาษาไทยแล้ววครับ