文章教程

14.6图片上传模块设计

9/17/2020 9:49:37 PM 人评论 次浏览

14.6　图片上传模块设计

图片上传在动态网页开发过程中应用非常广泛，为了能够和用户更好地互动，很多网站都为用户提供了上传图片的功能。如果有比较好的图片想和其他人一同分享，就可以通过图片上传功能来实现，以增加网站的核心竞争力。本系统的图片上传模块主要实现对图片的添加、浏览、查询和删除操作，而对图片的删除则只有管理员才有权限。

14.6.1　图片上传模块技术分析

上传图片和上传文件的原理基本相同，接下来主要介绍如何上传图片和图片的保存方式。

1．上传图片的基本流程

在网页中实现上传图片功能的步骤如下。

（1）通过<form>表单中的file元素选取上传数据。

使用file元素上传数据时注意一点：就是在form表单中要加上属性enctype="multipart/form-data"，否则上传不了文件或图片。

（2）在处理页中使用$_FILES变量中的属性判断上传文件类型和上传文件或图片，大小是否符合要求。$_FILES变量为系统预定义变量，保存的是上传文件（图片）的相关属性。使用格式为：$_FILES[name][property]。图片的相关属性如表14-5所示。

表14-5　图片相关属性

属性值 说明
name 上传文件的文件名
type 上传文件的类型
size 上传文件的大小
tmp_name 上传文件在服务器中的临时文件名
error 上传文件失败的错误代码

（3）使用move_uploaded_file()函数上传文件（图片）或将文件（图片）以二进制的形式保存到数据库中。使用函数将文件（图片）保存到对应的文件夹中和以二进制的形式保存到数据库中是上传文件（图片）的两种形式。

（4）返回页面等待下一步操作。

2．使用上传函数保存文件或图片

使用上传函数上传文件或图片的本质就是将文件或图片从浏览器端复制到服务器端指定的文件夹里，数据库所存储的就是文件或图片的相对地址。当页面显示图片时需分为两步：第一步是读取文件或图片在数据库表中的地址；第二步是根据地址在页面中显示图片。此种方式的好处是减少数据库的容量和对数据库的压力，而且图片很容易被搜索引擎抓到，从而提高网站流量和人气。

move_uploaded_file()函数的一般格式为：

　　bool  move_uploaded_file ( string filename, string destination );

filename：上传到服务器中的临时文件名。

destination：保存文件的实际路径。

注意：这里的filename为临时文件名，而不是上传文件的原文件名，可以通过$_FILES[filename][tmp_name]来获取。

14.6.2　图片上传的实现过程

博客用户登录后，单击导航栏中的“图片管理”|“添加图片”选项，即可进入添加图片页面，在“图片名称”文本框中添加上传的图片名称，在“上传路径”文本框中选择或者单击“浏览”按钮选择自己喜欢的图片，单击“提交”按钮，以二进制形式将图片上传到数据库中。图片上传页面的运行结果如图14-16所示。

image

图14-16　图片上传页面

图片上传页是一个上传文件的表单，主要包括一个文本域、一个文件域和一个“提交”按钮。部分表单元素的名称及属性如表14-6所示。

表14-6　图片上传页面中的表单元素

名称 元素类型 重要属性 含义
myform form method="post" action="tptj_ok.php" enctype="multipart/form-data" 图片上传表单
tpmc text type="text" id="tpmc" size="40" 图片名称
file file type="file" size="23" maxlength="60" 上传路径
btn_tj submit type="submit" id="btn_tj" value="提交" onClick="return pic_chk();" “提交”按钮

当用户输入图片名称，并选择相应路径后，单击“提交”按钮，系统将进入到上传处理页（tptj_ok.php）中进行处理。在处理页中，首先对图片名称进行处理，去掉特殊字符、空行和空格，然后对上传的文件进行类型检查、文件大小检查。最后以二进制的形式，和图片的其他信息（如上传用户、上传时间等）一起存进数据库的表中。关键代码如下。

　　<html>
　　<head>
　　</head>
　　<body>
　　<?php
　　session_start();
　　include("Conn/conn.php");

　　if($_POST["btn_tj"]=="提交"){
　　		
　　        $tpmc=htmlspecialchars($_POST[tpmc]);
　　  	     //将图片名称中的特殊字符转换成HTML格式
　　	    $tpmc=str_replace("\n","<br>",$tpmc);
　　	     //将图片名称中的回车符以自动换行符取代
　　	    $tpmc=str_replace("","&nbsp;",$tpmc);
　　	    //将图片名称中的空格以"&nbsp;"取代
　　	
　　		$author=$_SESSION[username];
　　	    $scsj=date("y;m;d");          //设置图片的上传时间
　　		//echo $_POST[file];
　　       // $fp=fopen($file,"r");       //以只读方式打开文件
　　       // $file=addslashes(fread($fp,filesize($file)));
　　		//将文件中的引号部分加上反斜线
　　		 $fp=fopen($_FILES['file']['tmp_name'],"r");
　　		//以只读方式打开文件
　　       $file=addslashes(fread($fp,filesize($_FILES['file']['tmp_
　　		name'])));       //将文件中的引号部分加上反斜线
　　		$query="insert into tb_tpsc (tpmc,file,author,scsj) values ('$tpmc',
　　		 '$file','$author','$scsj')";     //创建插入图片数据的sql语句
　　	
　　		$result=mysql_query($query);
　　		if ($result)
　　		{
　　			echo "<meta http-equiv=\"refresh\" content=\"1;url=browse_pic.
　　			php\">图片上传成功，请稍等...";
　　		}
　　		else
　　		{
　　			echo "defeat，the size of image is too large .(size<220kb)";
　　		}
　　 }
　　?>
　　</body>
　　</html>

14.6.3　图片浏览与删除的实现过程

图片上传使用的数据库表为t_pic。无论是注册用户，还是非注册用户，只要登录网站，就可以浏览所有图片。管理员拥有删除图片的权限，其他人都无此操作权限。非注册用户可以通过首页中的“最新图片”进入图片浏览页面，注册用户先进入个人管理界面，单击“图片管理”|“浏览图片”菜单，同样可以进入图片浏览页面。用户浏览图片页面的运行结果如图14-17所示。

image

图14-17　浏览图片页面

本页的实现代码和查看文章页面略有不同，查看文章页面中，每条数据占了一行，而查看图片则采用的是分栏显示，以每行两张图片的格式输出，每页显示4张图片。图片下有对应的“删除”按钮，单击按钮可将图片删除。程序关键代码如下。

　　<?php session_start(); include "Conn/conn.php";  include "check_login.
　　php";?>
　　<html>
　　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
　　<link href="CSS/style.css" rel="stylesheet">
　　<title>浏览图片</title>
　　<style type="text/css">
　　<!--
　　.style1 {font-size: 12pt}
　　-->
　　</style>
　　</head>
　　<script src=" JS/menu.JS"></script>
　　<script language="javascript">
　　function pic_chk(){
　　if(confirm("确定要删除选中的项目吗？一旦删除将不能恢复！")){
　　	return true;
　　}else
　　	return false;
　　}
　　</script>
　　<body>
　　<div class=menuskin id=popmenu
　　      onmouseover="clearhidemenu();highlightmenu(event,'on')"
　　      onmouseout="highlightmenu(event,'off');dynamichide(event)"
　　	  style="Z-index:100;position:absolute;">
　　</div>
　　<TABLE width="757" cellPadding=0 cellSpacing=0 style="WIDTH: 755px" align=
　　	"center">
　　  <TBODY>
　　    <TR> <TD style="VERTICAL-ALIGN: bottom; HEIGHT: 6px" colSpan=3> <TABLE
　　      style="BACKGROUND-IMAGE: url( images/f_head.jpg); WIDTH: 760px;
　　	   HEIGHT: 154px"
　　      cellSpacing=0 cellPadding=0> <TBODY>
　　            <TR>
　　              <TD height="110" colspan="6"
　　          style="VERTICAL-ALIGN: text-top; WIDTH: 80px; HEIGHT: 115px;
　　		TEXT-ALIGN: right"></TD>
　　            </TR>
　　            <TR>
　　              <TD height="29" align="center" valign="middle">
　　			  <TABLE style="WIDTH: 580px" VERTICAL-ALIGN: text-top;
　　			  cellSpacing=0 cellPadding=0 align="center">
　　                  <TBODY>
　　                    <TR align="center" valign="middle">
　　			 <TD style="WIDTH: 100px; COLOR: red;">欢迎您:&nbsp;<?
　　			 php echo $_SESSION[username]; ?>&nbsp;&nbsp;</TD>
　　                     <TD style="WIDTH: 80px; COLOR: red;"><SPAN  style="FONT-
　　			   SIZE: 9pt; COLOR: #cc0033"></SPAN> <a href="index.php">
　　			   博客首页</a></TD>
　　                     <TD style="WIDTH: 80px; COLOR: red;"><A href="RegPro.
　　			   php"> </A><a  onmouseover=showmenu(event,productmenu)
　　			   onmouseout=delayhidemenu() class='navlink' style=
　　			   "CURSOR:hand" >文章管理</a></TD>
　　                     <TD style="WIDTH: 80px; COLOR: red;"><A href="RegPro.
　　			   php"> </A><a  onmouseover=showmenu(event,Honourmenu)
　　			   onmouseout=delayhidemenu() class='navlink' style=
　　			   "CURSOR:hand">图片管理</a></TD>
　　                     <TD style="WIDTH: 90px; COLOR: red;"><A href="RegPro.
　　			   php"> </A><a  onmouseover=showmenu(event,myfriend)
　　			   onmouseout=delayhidemenu() class='navlink' style=
　　			   "CURSOR:hand" >朋友圈管理</a>  </TD>
　　                      <?php
　　				  if($_SESSION[fig]==1){
　　				   ?>
　　				   <TD style="WIDTH: 80px; COLOR: red;"><a
　　				   onmouseover=showmenu(event,myuser) onmouseout=
　　				   delayhidemenu() class='navlink' style="CURSOR:hand"
　　				   > 管理员管理</a></TD>
　　  				 <?php
　　				  }
　　				  ?>
　　				  <TD style="WIDTH: 80px; COLOR: red;"><A href="RegPro.
　　				  php"> </A><a href="safe.php">退出登录</a></TD>
　　                   </TR>
　　                  </TBODY>
　　              </TABLE>			  </TD>
　　            </TR>
　　          </TBODY>
　　        </TABLE></TD>
　　    </TR>
　　    <TR>
　　      <TD colSpan=3 valign="baseline" style="BACKGROUND-IMAGE: url(images/
　　	  bg.jpg); VERTICAL-ALIGN: middle; HEIGHT: 450px; TEXT-ALIGN: center">
　　	  <table width="100%" height="100%"  border="0" cellpadding="0"
　　	  cellspacing="0">
　　        <tr>
　　          <td height="451" align="center" valign="top"><br>
　　            <table width="640"  border="0" cellpadding="0" cellspacing="0">
　　            <tr>
　　              <td width="613" height="16" align="right" valign="top">
　　		  &nbsp;</td>
　　              <br>
　　            </tr>
　　            <tr>
　　              <td height="292" align="center" valign="top" bordercolor=
　　		  "#D6E7A5">
　　				<table width="600" border="1" align="center" cellpadding=
　　				"3" cellspacing="1" bordercolor="#9CC739" bgcolor=
　　				"#FFFFFF">
　　                <tr align="left" colspan="2" >
　　                  <td width="390" height="25" colspan="3" valign="top"
　　		        bgcolor="#EFF7DE"> <span class="tableBorder_LTR">
　　                    浏览图片</span>                    </td>
　　                </tr>

　　			  <td height="192" align="center" valign="top" ><?php
　　	if($_GET[page]=="" || is_numeric($_GET[page]==false))
　　	  {
　　	    $page=1;
　　	  }
　　	 else
　　	  {
　　	   $page=$_GET[page];
　　	  } 	
　　	    $page_size=4;     //每页显示4张图片
　　	    $query="select count(*) as total from tb_tpsc order by scsj desc";
　　	     $result=mysql_query($query);       //查询总的记录条数
　　	     $message_count=mysql_result($result,0,"total");       //为变量赋值
　　		if($message_count==0)
　　		 {
　　		  echo "暂无图片！";
　　		 }
　　		 else
　　		  {
　　		    if($message_count<$page_size)
　　			 {
　　			   $page_count=1;
　　			 }
　　			 else
　　			  {
　　			    if($message_count%$page_size==0)
　　				 {
　　				   $page_count=$message_count/$page_size;	
　　				 }
　　				 else
　　				  {
　　				    $page_count=ceil($message_count/$page_size);	
　　				  }
　　		       }
　　	 	    $offset=($page-1)*$page_size;
　　		    $query="select * from tb_tpsc where scsj order by id desc limit
　　		     $offset, $page_size";			
　　		     $result=mysql_query($query);
　　		?>
　　			    <table width="496" border="1" align="center" cellpadding=
　　			    "3" cellspacing="1" bordercolor="#D6D7D6">
　　                 	 <tr>
　　                      <?php
　　		   $i=1;
　　		   while($info=mysql_fetch_array($result))
　　		   {
　　		     if($i%2==0)
　　		       {
　　		 ?>
　　                    <td width="500"><table width="245" border="0"
　　			 cellpadding="0" cellspacing="0">
　　                        <tr>
　　                         <!-- <td colspan="2"><div align="center"><img src=
　　				  "image.php?recid=<?php echo $info[id];?>" width=
　　				  "225" height="160"></div></td>-->
　　                       	  <td height="160" colspan="2"><div align="center">
　　				  <img src="image.php?recid=<?php echo $info[id];?>
　　				  " width="225" height="160"></div></td>
　　                        </tr>
　　                        <tr>
　　                          <td width="109" height="25" align="left">&nbsp;图片
　　			     名称:<?php echo $info[tpmc];?></td>
　　                          <td width="128">上传时间:<?php echo $info[scsj];?>
　　			      </td>
　　                        </tr>
　　						<tr>
　　							<td colspan="2" height="25">
　　							<?php
　　								if ($_SESSION[fig]==1){
　　							?>
　　							  <a href="remove.php?pic_id=<?php echo $info
　　							  [id]?>"><img src="images/A_delete.gif"
　　							  width="52" height="16" alt="删除图片" onClick=
　　							  "return pic_chk();"></a>
　　							<?php
　　								}
　　							 ?>	
　　							</td>
　　						</tr>
　　                    </table></td>
　　                  </tr>
　　                  <?php
　　		    }
　　			else
　　			{
　　		   ?>
　　  <td width="500" height="180"><table width="236" height="185" border="0"
　　	 cellpadding="0" cellspacing="0">
　　       <tr>
　　          <td height="160" colspan="2"><div align="center"><img src="image.
　　		 php?recid=<?php echo $info[id];?>" width="225" height="160">
　　		 </div></td>
　　        </tr>
　　        <tr>
　　          <td width="110" height="25">&nbsp;图片名称:<?php echo $info
　　		 [tpmc];?></td>
　　          <td width="126">上传时间:&nbsp;<?php echo $info[scsj];?></td>
　　        </tr>
　　		<tr>
　　			<td colspan="2" height="25">
　　			<?php
　　								if ($_SESSION[fig]==1){
　　							?>
　　							  <a href="remove.php?pic_id=<?php echo $info
　　							  [id]?>"><img src="images/A_delete.gif"
　　							  width="52" height="16" alt="删除图片" onClick=
　　							  "return pic_chk();"></a>
　　							<?php
　　								}
　　							 ?>	
　　			</td>
　　		</tr>
　　    </table></td>
　　      <?php
　　		      }
　　		     $i++;
　　			}
　　		   ?>
　　  </tr>
　　                </table></td>
　　              </table>
　　			  <table width="600" border="0" align="center" cellpadding="0"
　　			  cellspacing="0">
　　                <tr bgcolor="#EFF7DE">
　　                  <td>&nbsp;&nbsp;页次：<?php echo $page;?>/<?php echo
　　			$page_count;?>页
　　                    记录：<?php echo $message_count;?> 条&nbsp;</td>
　　                  <td align="right" class="hongse01">
　　                    <?php
　　				  if($page!=1)
　　				   {
　　				     echo  "<a href=browse_pic.php?page=1>首页</a>&nbsp;";
　　					 echo "<a href=browse_pic.php?page=".($page-1).">上一
　　					 页</a>&nbsp;";
　　				   }
　　				  if($page<$page_count)
　　				   {
　　				        echo "<a href=browse_pic.php?page=".($page+1).">下
　　					  一页</a>&nbsp;";
　　				        echo  "<a href=browse_pic.php?page=".$page_
　　					  count.">尾页</a>";
　　				   }
　　				 }
　　				?>
　　                  </td>
　　                </tr>
　　              </table>
　　			  <p>&nbsp;</p></td>
　　            </tr>
　　          </table>
　　            <br>
　　            <br>
　　            <br></td>
　　    </tr>
　　</table></TD>
　　    </TR>
　　  </TBODY>
　　</TABLE>
　　</body>
　　</html>
　　图片对应的“删除”按钮，程序关键代码如下。
　　<?php
　　	include "Conn/conn.php";
　　    $sql="delete from tb_tpsc where id=".$_GET[pic_id];
　　    $result=mysql_query($sql);
　　	if($result){
　　		echo "<script>alert('图片删除成功!');location='browse_pic.php';
　　		</script>";
　　	}
　　	else{	
　　		echo "<script>alert('图片删除操作失败!');history.go(-1);</script>";
　　	}
　　?>
相关教程

Copyright © 2017-2021 52haozy.com All Rights Reserved.

首页

搜索

会员

教程类别