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字段的值,也就是图片在文件中的存储路径),图片容器显示对应路径的图片。