PHP+JavaScript+HTML實現上傳PDF和瀏覽PDF課件

阿新 • • 發佈：2019-01-16

一. 隱藏/顯示table

首先介紹如何通過JavaScript實現點選超連結實現隱藏和顯示Table或DIV的效果，程式碼如下所示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	/* 這個連結改變顏色 */
	a.one:link {color: #0000ff}
	a.one:visited {color: #0000ff}
	a.one:hover {color: #ffcc00}
</style>
</head>
<script language="JavaScript">
function change(el) {
	whichEl = document.getElementById(el)    //獲得指定ID值的物件
	if (whichEl.style.display == 'none') {   //block是預設值為顯示,none為隱藏
	   whichEl.style.display   = 'block';
	} else {
	     whichEl.style.display   = 'none';
	}
	return;
}
</script>
<body>
<TABLE cellSpacing=0 cellPadding=2 width="95%" align=center border=0>
  <TR>
    <TD align=left width=120 style="COLOR: #880000;font-weight:bold;">
    <a href="#" class="one" onclick=change("operate")> 上傳課件 </a></TD></TR>
</TABLE>
<form action="upload.php" method="post" enctype="multipart/form-data">
<TABLE id="operate" cellSpacing=0 cellPadding=0 width="80%" align=right border=0 style="DISPLAY: none">
  <tr>
    <td colspan="3"><hr width="90%" size="1" color="#FF0000"></td>
  </tr>
  <TR>
    <td width="80"><div align="right">課程編號: </div></td>
    <td><?php echo $_SESSION['courseid']; ?></td>
    <td></td>
  </TR>
  <TR>
    <td width="120"><div align="right">課件名稱: </div></td>
    <td width="250"><input type="text" name="kjname" id="kjname" value="" style=width:165pt; maxlength="50"/></td>
    <td></td>
  </TR>
  <TR>
    <td ><div align="right">上傳課件: </div></td>
    <td><input type="file" name="myfile" value="" style='font-size:16px'/>（*小於2M）</td>
  </TR>
  <TR height=4>
    <TD colspan="3"></TD>
  </TR>
  <tr>
    <td colspan="3"><hr width="90%" size="1" color="#FF0000"></td>
  </tr>
  <tr>
      <td colspan="3" align="middle"><div align="middle">
      <input type="submit" style='font-size:22px' name="submit" value="確認上傳"/>
      </div></td>
  </tr>
</TABLE>
</form> 
</body>
</html>

其中核心程式碼是通過<script language="JavaScript">..</script>定義JavaScript函式，設定style.display屬性none隱藏、block顯示；同時在超連結中呼叫該函式實現如上圖所示的效果。程式碼如下：
<script language="JavaScript">
function change(el) {
whichEl =document.getElementById(el)
if (whichEl.style.display == 'none') {

//block為顯示,none為隱藏
whichEl.style.display = 'block';
} else {
whichEl.style.display = 'none';
}
return;
}
</script>
<a href="#" class="one"onclick=change("operate")> 上傳課件 </a>
<TABLEid="operate" align=right border=0style="DISPLAY: none"

>//初始隱藏
同時在超連結中我通過設定style屬性，當點選、移動到超連結上顯示的顏色不同。在超連結中通過<a class="one">即可實現。程式碼如下：
<style type="text/css">
/* 這個連結改變顏色 */
a.one:link {color: #0000ff}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
</style>
<a href="#" class="one"onclick=change("operate")> 上傳課件 </a>
顯示效果如下圖所示：

二. 顯示PDF在HTML網頁中

顯示PDF是通過超連結跳轉的，這也是我前面PHP值傳遞中講述過的方法。其核心程式碼main_right3-3.php如下：

<TABLE cellSpacing=0 cellPadding=2 width="90%" align=right border=0>
	<?php
		//獲取課件資訊
		$hgi=new HttpPostInf();
		$result=$hgi->doquery('2',"select * from Courseware_PDF where CP_Cid='".$cid."';");
		$dj=json_decode($result,true);
		$jcount=count($dj);
		for($i=0; $i<$jcount; $i++){
	?>
	<TR height=10>
  	<TD></TD></TR>
  <TR>
  	<TD width=40><IMG src="../images/pdf-24.png"></TD>
    <TD>
    <A href="main_right3-3-content.php?id=<?php echo $dj[$i]['CP_PDFurl'] ?>" 
    	class="one" target="rightFrame"><?php echo $dj[$i]['CP_Cwname'];?></A>
	  </TD>
 	  <TD></TD>
 	</TR>
 	<?php
		}
	?>
	<TR height=20><TD></TD></TR>
</TABLE>

其中裡面巢狀的PHP程式碼是連線資料庫裡面的資料，其中資料庫是通過新浪SAE搭建的，PDF儲存的是URL，你既可以連線本地的地址也可連線雲盤上的地址。如下圖所示：

其中例項化類new HttpPostInf在httppost.php中，主要是後臺通訊處理。程式碼如下：

<?php
header("Content-Type: text/html; charset=utf-8");
class HttpPostInf{
    function __construct(){ //無參建構函式
    }
    function doquery($type , $sql){ //網路通訊函式
			$data = array ('sqlType' => $type , 'sqlExe' => $sql); 
			$data = http_build_query($data);  
			$opts = array ('http' => array ('method' => 'POST','header'=> "Content-type: application/x-www-form-urlencoded\r\n" ."Content-Length: " . strlen($data) . "\r\n",'content' => $data)); 
			$context = stream_context_create($opts);
			$html = file_get_contents('http://courseweb.sinaapp.com/courseweb.php', false, $context);
			return $html;
	}	
}
?>

通過下面程式碼即可實現跳轉到main_right3-3-content.php顯示相應php，而傳遞的id引數整數你點選的PDF超連結對應的資料庫課件URL地址。
<A href="main_right3-3-content.php?id=<?php echo $dj[$i]['CP_PDFurl'] ?>"
class="one" target="rightFrame">
下面是main_right3-3-content.php程式碼顯示PDF，這是通過HTML5實現的。

<?php
	header("Content-Type: text/html; charset=utf-8");
	//include ("saestorage.class.php");
	//echo $_GET['id'];
?>

<!DOCTYPE HTML>
<html>
<body>
	<embed width=100% height=100% fullscreen=yes src="<?php echo $_GET['id'];?>" />
</body>
</html>

下圖是顯示我們的雲盤中PDF的例子：

<html>
<body>
<embed width=100% height=100% fullscreen=yes 
src="http://courseweb-coursewebpdf.stor.sinaapp.com/Expected%20Divergence%20based%20Feature%20Selection.pdf" />
</body>
</html>

你通過上面程式碼可以顯示如下圖所示的線上PDF效果。

同樣本地的網址為src="http://localhost:8080/CourseStudy/pdf/iCoot.pdf"即可顯示，其中資料夾為安裝的Apache路徑“F:\\xampp\htdocs\CourseStudy\pdf”，其中CourseStudy是我這個專案的檔名。

三. PHP上傳PDF

PHP上傳PDF程式碼如下，通過Form中定義屬性enctype="multipart/form-data"，同時上傳到action="upload.php"該路徑下進行處理，提交方法採用POST方法。而選擇檔案的是input定義type="file"即可。main_right3-3.php程式碼上傳部分如下：

<form action="upload.php" method="post" enctype="multipart/form-data">
<TABLE id="operate" cellSpacing=0 cellPadding=0 width="80%" align=right border=0 style="DISPLAY: none">
  <tr>
    <td colspan="3"><hr width="90%" size="1" color="#FF0000"></td>
  </tr>
  <TR>
  	<td width="80"><div align="right">課程編號: </div></td>
    <td><?php echo $_SESSION['courseid']; ?></td>
    <td></td>
  </TR>
  <TR>
  	<td width="120"><div align="right">課件名稱: </div></td>
    <td width="250"><input type="text" name="kjname" id="kjname" value="" style=width:165pt; maxlength="50"/></td>
  	<td></td>
  </TR>
  <TR>
  	<td ><div align="right">上傳課件: </div></td>
    <td><input type="file" name="myfile" value="" style='font-size:16px'/>（*小於2M）</td>
  </TR>
  <TR height=4>
    <TD colspan="3">
    </TD>
  </TR>
  <tr>
    <td colspan="3"><hr width="90%" size="1" color="#FF0000"></td>
  </tr>
  <tr>
    <td colspan="3" align="middle"><div align="middle">
      <input type="submit" style='font-size:22px' name="submit" value="確認上傳"/>
    </div></td>
  </tr>
</TABLE>
</form>

而上傳檔案upload.php程式碼如下，主要是通過<input type="file" name="myfile"中myfile對應上傳的檔案PDF屬性，並判斷是否是PDF檔案。
bool move_uploaded_file ( string filename, string destination) 上傳檔名filename到指定路徑destination
程式碼中我是上傳到專案中pdf資料夾下，同時以當前時間命名；後面是插入資料庫課件表的操作。
$_FILES['myfile']['name']是指被上傳檔案的名稱
$_FILES['myfile']['type']是指被上傳檔案的型別，此時為"application/pdf"
$_FILES['myfile']['size']是指被上傳檔案的大小，單位為位元組(B)
$_FILES['myfile']['tmp_name'] 是指被上傳檔案存在伺服器中的臨時副本檔名稱，檔案被移動到指定目錄後臨檔案將被自動消毀。
參考： http://blog.csdn.net/wer1234s/article/details/7845018

<?php
	header("Content-Type: text/html; charset=utf-8");
	include ("../database/human.php");
	include ("../database/course.php");
	session_start();
	if($_POST)
	{
			$file_name= $_FILES['myfile']['name'] ;
			$tmp_name = $_FILES['myfile']['tmp_name']; 
			if ($_FILES['myfile']['type'] != "application/pdf") {
				 echo "<p>請上傳 PDF 格式的檔案.</p>";
			}
			else {
				if(is_uploaded_file($tmp_name)) {
					//upload file  	
					$dest_dir='pdf'; //上傳檔案的路徑
					$name=$dest_dir.'/'.time().".pdf";
					$time = time();
					$result=move_uploaded_file($tmp_name,$name);
					if($result==1) { 
						echo "<p>成功上傳</p>";
						$path="http://localhost:8080/CourseStudy/teacher/".$name;
						//echo $path;
						//插入資料
						$sql = "INSERT INTO Courseware_PDF (CP_Cno,CP_Cid,CP_Cwname,CP_PDFurl) ";
						$sql .= "VALUES ('".$time."','".$_SESSION['courseid']."','".$_POST['kjname']."','".$path."');";
						echo $sql;
						$hgi=new HttpPostInf();
						$result=$hgi->doquery('1',$sql);
						header('Location:main_right3-3.php');
					}
				}
				else {
					echo "<p>上傳檔案失敗</p>";  
				}
			}
	}
?>

如下圖所示，選擇PDF並上傳的執行結果，同時檔案上傳至資料夾為安裝的Apache路徑“F:\\xampp\htdocs\CourseStudy\pdf”路徑下。

最後希望文章對你有所幫助，因為這些知識都是環環相扣的，所以單獨講述不太易懂，我也是盡我自己的最大努力寫這幾篇文章，可能文章效果不是很好，也存在著很多不足之處。但請海涵，還是希望你能發現文章中對你有用的知識吧！最後紀念下自己寫的第100篇部落格，兩年時間感謝自己~期待更長
（By：Eastmount 2015-3-6 深夜3點 http://blog.csdn.net/eastmount/）

PHP+JavaScript+HTML實現上傳PDF和瀏覽PDF課件

一. 隱藏/顯示table

二. 顯示PDF在HTML網頁中

三. PHP上傳PDF

PHP+JavaScript+HTML實現上傳PDF和瀏覽PDF課件

用struts2實現上傳檔案和轉化檔案為html

基於springMVC+AJAX+bootstraptable實現上傳檔案和客戶端分頁

使用form表單同時實現上傳檔案和提交文字資料

ajax實現上傳檔案和form表單上傳檔案的區別

上傳檔案和下載pdf還有tp3掃二維碼下載and輸出text檔案給使用者

javaScript如何實現上傳檔案

使用JQ載入圖片,實現上傳前先瀏覽.支援IE8+,火狐,Chrome,不支援Safari

Java和PHP兩種方式實現上傳圖片到新浪微博的圖床

javascript實現上傳和下載

(轉)ASP.NET(C#)FileUpload實現上傳限定類型和大小的文件到服務器

springmvc實現上傳和下載

簡單的PHP上傳圖片和刪除圖片示例程式碼

使用資料庫和javabean實現上傳與下載

PHP(Thinkphp5)實現上傳更換圖片

PHP大檔案分片上傳的實現方法

Windows 的java客戶端實現上傳檔案到Linux的Hadoop叢集上(注意ip和埠是否一致)

如何使用elementUI呼叫一次介面同時上傳圖片和檔案，同時需要攜帶其他引數，實現呼叫後端介面

PHP(Thinkphp)實現上傳更換圖片

vue html jq 實現上傳圖片顯示在頁面上預覽

PHP+JavaScript+HTML實現上傳PDF和瀏覽PDF課件

一. 隱藏/顯示table

二. 顯示PDF在HTML網頁中

三. PHP上傳PDF

相關推薦