PHP+MySQL实现上传图片的显示

1.实现上传图片文件时显示图片

1.1运行结果：

以下是在手机端和电脑端使用时显示图片的结果。

 

 

1.2实现思路：

设定一个from表单，其中最重要的部分就是和js有互动的图片组。

JS部分通过使用FileReader接口读取文件。修改获取到的html元素的值，以达到显示上传的图片的目的。详细解释见代码注释。

2保存图片路径到数据库

主要说上传图片的显示，上传图片保存到数据库代码中有注释，

<?php
include('conn.php');//导入连接数据库文件
	$name=$_POST['name'];//接收景点
	$grade=$_POST['grade'];//接收等级
	$address=$_POST['address'];//接收地址
	$TicketPrice=$_POST['TicketPrice'];//接收门票价格
	$introduce=$_POST['introduce'];//接收介绍信息
 if ($_SERVER['REQUEST_METHOD'] == 'POST') //$_SERVER['REQUEST_METHOD']提交表单的方式，这里用POST提交。
 {
	$max_file_size=2000000; //设置上传文件的大小, 单位BYTE
	$destination_folder="picture/"; //设置上传的文件路径，默认本地路径
	$file=$_FILES["upfile"];//接收图片文件信息
	var_dump($file);
 if(!file_exists($destination_folder)) //file_exists() 函数检查文件或目录是否存在。
 {
 mkdir($destination_folder); //不存在则使用mkdir() 函数创建目录。
 }
 $filename = $file["tmp_name"];
 $image_size = getimagesize($filename);
 $pinfo = pathinfo($file["name"]); //pathinfo() 函数以数组或字符串的形式返回关于文件路径的信息。
 $ftype = $pinfo['extension']; //"extension"在PHP.INI文件里面 因为我们要用到GD库
 $destination = $destination_folder.time().".".$ftype;
 if (file_exists($destination) && $overwrite != true) //判断是否存在同名文件
 {
 echo "同名文件已经存在了";
 exit;
 }
 if(!move_uploaded_file ($filename, $destination))
 {
 echo "移动文件出错";
 exit;
 }
 $pinfo = pathinfo($destination);
 $fname = $pinfo["basename"];
$lujing="../server/".$destination;
 }
try{
	$sql="INSERT INTO ScenicSpot values(null,'{$name}','{$grade}','{$address}','{$TicketPrice}','{$introduce}','{$lujing}');";	
	$num=$conn->exec($sql);
}catch(PDOException $e){
	die("操作失败".$e->getMessage());
}
header("location:../php/index.php");

 

3．实现页面内查看按钮弹窗查看图片

3.1运行结果

Index.php页面输出的表格如下：

 单击查看按钮后，跳出图片弹窗，右上角关闭按钮(HTML中的×绑定单击事件实现关闭功能)没有截取。

 

 3.2实现思路：

3.2.1 输出表格

3.2.2 表格最后一列的查看按钮及功能

通过给查看按钮绑定单击事件，告知js触发单击事件的是哪个查看按钮(php传递danji（this），js接收danji（event），js使用（event.title）)，达到单页面多个按钮不冲突的功能。

3.2.3 弹窗区域

弹窗内包含关闭按钮(span × 显示x)和图片容器(img)，其中span标签内书写了单击事件，即单击时隐藏id为myModal(弹窗区域)的元素，以达到关闭弹窗的功能。图片容器img设置id属性的值为img，方便js部分对图片容器的src属性赋值。

3.2.4 js更改弹窗区域的display属性和图片容器的src属性

 单击函数修改获取到的弹窗区域的显示属性为模块级显示，图片容器的src属性为查看按钮的title属性的值(a标签的title属性值，即数据库中对应的picture字段的值，也就是图片在文件中的存储路径)，图片容器显示对应路径的图片。