PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

อยากสอบถามเกี่ยวกับ การแยกไฟล์ .pdf .doc .docx

อยากสอบถามเกี่ยวกับ การแยกไฟล์ .pdf .doc .docx
คือ หนูอยากาถมพี่นิคอ่ะค่ะว่า 
ตอนที่หนูทำการ upload file มันสามารถ อัพโหลดได้ทุกไฟล์
แต่ที่นี้หนูติดปัญหาตรงนี้ค่ะพี่ ว่า ถ้าuser ทำการ upload เป็น ไฟล์ word มา เราจะให้ทำการโชว์เป็น icon ค่ะ
แล้วก็พอเวลา คลิ๊กที่ไอคอนก็อยากให้ เปิดไฟล์ word  ได้ โดยที่ไม่ต้องดาวน์โหลดก่อนค่ะ และถ้าเป็นไฟล์รูป ก็จะโชว์ตามปกติค่ะ

หนูหามาหลายเว็บแล้วค่ะ แต่ก็ไม่เจอสักที 
ตัวอย่าง หนูอยากได้เหมือน facebook เลยค่ะพี่นิค แบบตอนดาวน์โหลด โหลดเสร็จ ตามที่หนูเข้าใจนะค่ะ น่าจะเป็น icon แล้วก็มีลิงค์ไปเปิดไฟล์ค่ะ 
พี่นิคพอมีคำแนะนำบ้างไหมค่ะ ต้องรบกวนพี่นิคอีกแล้ว

ตอนนี้โค้ดหนูเป็นอย่างนี้ค่ะ 
พอ select เสดแล้ว ก็อยากจะให้มันแบ่งประเภทไฟล์ค่ะ ถ้าเป็น .jpg .png .gif ก็โชว์รูป
แต่ถ้าเป็นไฟล์ word ต้องทำยังไงค่ะ

<?php
session_start();
$_SESSION["user_id"] = "1";
session_write_close();


include("inc/dbconnect.php");


			  	$query = "select*from user left join chat on user.user_id = chat.user_id where chat.user_id is not null ";
				$run = $con->query($query);
				
				
				
				
				
	
?>
   			<?php 
			  	
			
			  	while($row = $run->fetch_array()) : 
			  ?>
              <div class="answer <?=($_SESSION['user_id']==$row['user_id'])?"left":"right"?>">
                <div class="avatar">
                  <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="User name">
                  <div class="status offline"></div>
                </div>
                <div class="name"> <?=$row["user_firstname"]; ?></div>
                <div class="text">
                	
                    <?=$row["message"]; ?> 
                   	<? if ($row['file'] != "" ) {?>
                    <img src="http://crewseaman.com/chat/file/<?=$row["file"]; ?>" width="130" height="120"/>
                    <? } ?>
                 
         
                </div>
                <div class="time"><? echo formatDate($row["date"]); ?></div>
              </div>
              
    		  
              
              
			  <?php endwhile; ?>


รบกวนด้วยนะค่ะพี่นิค ขอบคุณค่ะ

โดย:  Chickenkook IP: 183.88.98.xxx วันที่: 25-08-2016 เวลา: 12:09:20

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 6
ขอบคุณค่ะพี่นิค ถ้าไม่พี่หนู งมตายเลย ^^

ขอบคุณะนะค่ะ ที่ช่วยเหลือมาตลอดเลย



โดย:  Chickenkook IP: 183.88.98.xxx วันที่: 26-08-2016 เวลา: 14:44:10
 ความคิดเห็นที่ 5
ซ่อนตัว loading ไว้ก่อน เช่นใช้ style display:none;
และก็ตรวจสอบการส่งค่า เมื่อเริ่มมีการส่งค่าให้ แสดงเปลี่ยนเป้น display:block;
แล้วก็ตรวจสอบว่าทำงานเสร็จแล้ว ให้ซ่อนอีกครั้ง
ขึ้นกับรูปแบบการนำไปใช้


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <title>JS Bin</title>
</head>
<body>
<style type="text/css">
div#messagesDiv{
	display: block;
	height: 280px;
	overflow: auto;
	background-color: #FDFDE0;
	width: 700px;
	margin: 5px 0px;
	border: 1px solid #CCC;
}
.left_box_chat{
	border: 1px solid #CCC;
	border-radius: 25px;
	margin: 5px;
	padding: 0px 10px;
	display:inline-block;
	float:left;
	clear:both;
	text-align:left;
	background-color:#FFF;	
}
.right_box_chat{
	border: 1px solid #CCC;
	border-radius: 25px;
	margin: 5px;
	padding: 0px 10px;
	display:inline-block;
	float:right;
	clear:both;
	text-align:right;
	background-color:#9F6;
}
</style>
<div id="messagesDiv">
<!--<div class="left_box_chat">1</div>
<div class="right_box_chat">2</div>-->
</div>
<input type="text" class="form-control" name="msg" id="msg" placeholder="Message">
  
<script type="text/javascript">
$(function(){
	

 /// เมื่อพิมพ์ข้อความ แล้วกดส่ง
  $("#msg").keypress(function (e) { // เมื่อกดที่ ช่องข้อความ  
	if (e.keyCode == 13) { // ถ้ากดปุ่ม enter  
	  var msg = $("#msg").val();  // เก็บค่าข้อความ  
      // แสดง loading
      $("#messagesDiv").append("<div class=\"left_box_chat loading_div\"><img src='http://i.imgur.com/KUJoe.gif' style='height:20px;'></div>");
      $("#msg").val(""); // ล้างค่าช่องข้อความ ให้พร้อมป้อนข้อความใหม่  		  
      $("#messagesDiv")[0].scrollTop = $("#messagesDiv")[0].scrollHeight;   // เลือน scroll ไปข้อความล่าสุด     
      setTimeout(function(){ // ตั้งเวลาซ่อนใน 1.5 วินาที
        $(".loading_div").hide();    // ซ่อน loading    
        // แสดงข้อความ
        $("#messagesDiv").append("<div class=\"left_box_chat\">"+msg+"</div>");    
      },1500);
	}  
  });  
  
});

</script>
</body>
</html>


ตัวอย่าง




โดย:  Ninenik IP: 180.183.50.xxx วันที่: 26-08-2016
 ความคิดเห็นที่ 4
ขอบคุณค่ะ พี่นิค หนูรบกวนถามอีกอย่างได้ไหมค่ะ ว่าเวลาที่เรา submit ข้อมูลไปแล้ว แล้วให้ขึ้น ตัว loading ก่อนจะแสดงข้อมูลออกมา นั้นต้องทำยังไงค่ะ เป็นแบบ ajax อ่ะค่ะพี่นิค

โดย:  Chickenkook IP: 183.88.98.xxx วันที่: 26-08-2016 เวลา: 08:53:52
 ความคิดเห็นที่ 3

ไม่แน่ใจน่ะ อาจจะเป็นได้ว่าที่เครื่องไม่ด้ติดตั้ง adobe reader หรือไม่ก็บราวเซอร์ไม่สนับสนุน
หรือถ้าสมมติ เข้าไปดูตัวอย่างตามล้ิงค์แล้ว แสดง แต่พอทดสอบเองไม่แสดง
ลองดูว่าไฟล์ pdfobject.js เรียกใช้ path ถูกต้องไหม ตรวจสอบการทำงานของ javasciprt ว่าทำงานได้ถูกต้องไหม ผ่าน
console

การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie 
http://www.ninenik.com/content.php?arti_id=692 via @ninenik


ถ้าทำตามนี้แล้วไม่ได้ อันนี้ไม่รู้สาเหตุเหมือนกัน อาจจะขึ้นกับแวดล้อมอื่นๆ คงต้องลองหาดูเอง
 



โดย:  Ninenik IP: 1.46.239.xxx วันที่: 25-08-2016
 ความคิดเห็นที่ 2
ขอบคุณค่ะพี่นิค แต่ ของหนูไม่ขึ้นแบบพี่เลยค่ะ งงมาก ในส่วนของไฟล์ pdf อ่ะค่ะ
เอาไฟล์ตามพี่ทุกอย่างเลยค่ะ
แต่มันขึ้นว่า ไม่ได้ติดตั้งโปรแกรม Adobe Reader หรือบราวเซอร์ไม่รองรับการแสดงผล PDF   
แต่ดาวน์โหลดได้ค่ะ อย่างนี้หนูต้องทำอย่างไรได้บ้างค่ะ

แอบบ งง ว่าของพี่นิคได้ แต่ของหนูไม่ได้อ่ะ
นี่ โค้ดค่ะพี่นิค

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>Document</title>    
</head>    
<body>    
  
     
<div id="pdfplace">  
ไม่ได้ติดตั้งโปรแกรม Adobe Reader หรือบราวเซอร์ไม่รองรับการแสดงผล PDF   
<a href="http://crewseaman.com/chat/file/พาจิตกลับบ้าน.pdf">คลิกที่นี้เพื่อดาวน์โหลดไฟล์ PDF</a>  
</div>  
  
<script type="text/javascript" src="PDFObject-master/pdfobject.js"></script>  
 <script type="text/javascript">  
  window.onload = function (){  
    var myPDF = new PDFObject({   
        url: "http://crewseaman.com/chat/file/พาจิตกลับบ้าน.pdf",  
        id: "myPDF",  
        width: "650px",  
        height: "700px",  
        pdfOpenParams: {  
            navpanes: 1,  
            statusbar: 0,  
            view: "FitH",  
            pagemode: "thumbs"  
        }  
        }).embed('pdfplace');  
  };  
</script>  
</body>  
</html>  


โดย:  Chickenkook IP: 183.88.98.xxx วันที่: 25-08-2016 เวลา: 17:50:34
 ความคิดเห็นที่ 1
การตรวจสอบไฟล์ ดูโค้ดต่อไปนี้เป็นแนวทาง

	$ext_photo=array("png","gif","jpg","jpeg"); // กำหนดนามสกุลของไฟล์รูปที่ต้องการเช็ค
	// สมมติไฟล์
	$arr_file=array("logo.png","apple_logo.jpg","Itinerary_55595421.pdf","doc_co_th.doc","no_file.xls");
	$pathFile="files/";  // โฟลเดอร์เก็บ ไฟล์
	
	foreach($arr_file as $file_name){ // วนลูปแสดงไฟล์ตัวอย่างเหมือน while()
		
		$fileVal=$pathFile.$file_name; // กำหนดตัวแปรเก็บ path เต็มของไฟล์
		if(file_exists($fileVal) && is_file($fileVal)){ // เช็คว่ามีไฟล์นี้หรือไม่ และเป็นไฟล์หรือไม่
			$ext_file=array_pop(explode(".",$file_name)); // ยากนามสกุลไฟล์จากชื่อไฟล์
			if(in_array($ext_file,$ext_photo)){ // ถ้าเป็นนามสกุลของไฟล์รูปภาพ
				// แสดงรูป
				echo "<a href='".$fileVal."' target='_blank'><img src='".$fileVal."' style='height:50px;'></a><br>";
			}else{ // ถ้าเป้นนามสกุลของไฟล์อื่นๆ
				// แสดงลิ้งค์
				echo "<a href='".$fileVal."' target='_blank'>".$fileVal."</a><br>";
			}
		}
	}
 
ส่วนการแสดงไอคอนรูปภาพ ลองใช้ css กำหนดตามเนื้อหานี้
สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ 
http://www.ninenik.com/content.php?arti_id=109 via @ninenik
 
และสำหรับการคลิกแล้วแสดงเอกสารแบบออนไลน์เลย พวกนี้ต้องใช้ plugin ถึงจะแสดงได้
และบางคร้งไม่รองรับในหลายไฟล์ ส่วนใหญ่เขาจะให้ดาวน์โหลดลงมาก่อนเปิดไฟล์ โดยแสดงเป็น
ลิ้งค์ไปยังไฟล์เลย 
ตัวอย่างเนื้อหา plugin ของไฟล์ pdf แสดงในหน้าเพจ
 
แสดง pdf ไฟล์ในเว็บเพจด้วย PDFObject อย่างง่าย 
http://www.ninenik.com/content.php?arti_id=695 via @ninenik


>>>  อัพเดท >>> 25-08-2016
------------------------------------------
ป้องกันกรณีอัพโหดลไฟล์ที่มีนามสกุลเป็นตัวพิมพ์ใหญ่ ให้เป็นพิมพ์เล็กก่อนนำไปตรวจสอบ
สามารถเปลี่ยนบรรทัดนี้
 
$ext_file=array_pop(explode(".",$file_name)); // แยกนามสกุลไฟล์จากชื่อไฟล์  
 
เป็นแบบนี้แทน
 
$ext_file=strtolower(array_pop(explode(".",$file_name))); // แยกนามสกุลไฟล์จากชื่อไฟล์


โดย:  Ninenik IP: 180.183.109.xxx วันที่: 25-08-2016