PHP+JavaScript+HTML实现上传PDF和浏览PDF课件

一. 隐藏/显示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) { style.display = ‘block’;style.display = ‘none’; } </script>> 上传课件 </a> align=right border=0 同时在超链接中我通过设置style属性,当点击、移动到超链接上显示的颜色不同。在超链接中通过<a class="one">即可实现。代码如下: <style type="text/css"> /* 这个链接改变颜色 */ a.one:link {color: #0000ff} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} </style>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,你既可以连接本地的地址也可连接云盘上的地址。如下图所示:

经验是由痛苦中粹取出来的

PHP+JavaScript+HTML实现上传PDF和浏览PDF课件

相关文章:

你感兴趣的文章:

标签云: