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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากสอบถามเกี่ยวกับ การแยกไฟล์ .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 183.88.98.xxx 25-08-2016 12:09:20

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

ความคิดเห็นที่ 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 180.183.109.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 183.88.98.xxx 25-08-2016 17:50

ความคิดเห็นที่ 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 1.46.239.xxx 25-08-2016

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

ขอบคุณค่ะ พี่นิค หนูรบกวนถามอีกอย่างได้ไหมค่ะ ว่าเวลาที่เรา submit ข้อมูลไปแล้ว แล้วให้ขึ้น ตัว loading ก่อนจะแสดงข้อมูลออกมา นั้นต้องทำยังไงค่ะ เป็นแบบ ajax อ่ะค่ะพี่นิค

chickenkook 183.88.98.xxx 26-08-2016 08:53

ความคิดเห็นที่ 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 180.183.50.xxx 26-08-2016

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

ขอบคุณค่ะพี่นิค ถ้าไม่พี่หนู งมตายเลย ^^

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

chickenkook 183.88.98.xxx 26-08-2016 14:44

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

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

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