? ? ? ? 在寒假簡單制作PHP網站時，需要實現在線瀏覽PDF和上傳PDF的簡單功能，下面就簡單介紹下該功能。實現效果如下圖所示：
? ? ? 1.當用戶登錄后，點擊“上傳課件”超鏈接可以實現隱藏和顯示上傳table的功能；
? ? ? 2.當用戶選擇上傳的課件后，PDF上傳至本地網頁文件夾下，同時插入數據庫；
? ? ? 3.當點擊相關PDF教學課件后，可以實現在線瀏覽功能。
? ? ? 網站布局參考：[PHP網站使用JavaScript和Iframe簡單實現部分刷新效果](http://blog.csdn.net/eastmount/article/details/43848585)
### 一. 隱藏/顯示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](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/](http://blog.csdn.net/eastmount/)）
