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

PHP+MySQL实现上传图片的显示相关推荐

事务（ACID）、并发一致性问题（丢失修改、读脏数据、不可重复读、幻影读）、封锁（封锁粒度、类型、协议、MySQL 隐式与显示锁定）
1. 事务 1.1 概念事务指的是满足 ACID 特性的一组操作,可以通过 Commit 提交一个事务,也可以使用 Rollback 进行回滚. 1.2 ACID 1.2.1 原子性(Atomic ...
关于MySQL相关的查看显示信息：
关于MySQL相关的查看显示信息: 数据库范围: 一.查看所有的数据库:(仅仅是看数据库数量与名字) mysql> show databases; 二.查看某个数据库的创建信息:(主要看数据库的 ...
php中上传图片怎么显示出来,PHP上传图片类显示缩略图功能
有缩略图功能但是感觉不全面,而且有点问题,继续学习,将来以后修改下 /** * Created by PhpStorm. * User: Administrator * Date: 2016/6/ ...
Mysql数据表一直显示使用中
做网站难免要操作数据库,有时候不知什么原因数据库就会出现一些问题.比如一个常见的Mysql数据表一直显示使用中,该如何修复处理? 方法一: 重启动mysql,简单,一般会有效. 方法二: 运行SQL语 ...
vue实现上传图片和显示图片
上传图片并显示点击上传文件的input的时候,将图片上传到页面上,并且显示已经上传的图片,同时也可以保存到后台 // 因为input的上传按钮,会显示的比较突兀,所以在点击div的时候判断是否存在了 ...
关于kindeditor编辑器批量上传图片不显示添加图片按钮的问题
今天在项目里发现kindeditor编辑器批量上传图片不显示添加文件按钮,去官网看demo是有的,经过浏览器debug发现是由于 multiimage.js文件的一个时间参数传递的不对, 很奇怪,改为 ...
当远程连接MySQL数据库的时候显示Can't connect to MySQL server (10060
当远程连接MySQL数据库的时候显示Can't connect to MySQL server (10060),我们从以下几个方面入手,找出错误的原因: 1.网络不通. 检查能不能ping通. 2.防 ...
javaweb网页上传图片并显示在页面上，并在服务端存到磁盘（base64编码解码）
最近做一个web项目用到上传图片,于是根据个人的知识及网上的搜集,将其总结于下: 上传图片时显示图片在页面 <input id="fileload" type=&quo ...
（二）QT5.14.2连接MySQL并使用QtableView显示数据表内容
系列文章目录第一章:(一)QT5.14.2+MSVC2017(32位/64位)+MySQL连接第二章:(二)QT5.14.2连接MySQL并使用QtableView显示数据表内容文章目录系列文 ...

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