PHP实现多张图片上传功能的示例代码
首先要知道这个函数
move_uploaded_file();
接下来是我们的input框，和我们的html页面
这里我们是增加的input框我们也可以写写一个属性 multiple="multiple" 这样就可以ctrl多选图片了
<html>
<head><title>多个文件上传表单</title></head>
<body>
<style>
form{
margin: 20px;
padding: 10px;
}
#picInput>input{
display: block;
margin: 10px;
}
</style>
<form action="pic.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
<div id="picInput">
上传图片：<input type="file" name='myfile[]'>
</div>
<input id="addBtn" type="button" onclick="addPic1()" value="继续添加图片"><br/><br/>
<input type="submit" value="上传文件">
</form>
<script>
function addPic1(){
var addBtn = document.getElementById('addBtn');
var input = document.createElement("input");
input.type = 'file';
input.name = 'myfile[]';
var picInut = document.getElementById('picInput');
picInut.appendChild(input);
if(picInut.children.length == 3){
addBtn.disabled = 'disabled';
}
}
</script>
</body>
</html>
PHP向后台插入图片方法和之前不一样了。
<meta charset="UTF-8">
<?php
$dbhost = 'localhost:3306'; // mysql服务器主机地址
$dbuser = 'root'; // mysql用户名
$dbpass = 'root'; // mysql用户名密码
$conn = mysqli_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('连接失败: ' . mysqli_error($conn));
}
// 设置编码，防止中文乱码
mysqli_query($conn , "set names utf8");
mysqli_select_db( $conn, 'image' );
$file = $_FILES['myfile']; //得到传输的数据,以数组的形式
$name = $file['name']; //得到文件名称，以数组的形式
$upload_path = "img/"; //上传文件的存放路径
//当前位置
foreach ($name as $key=>$names){//foreach将$name也就是我们所有图片的name的键值对输出，
/*
* strtolower()将内容转为小写，
* substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。这个是获取我们name的最后一的路径。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符
*
*
*/
$type = strtolower(substr($names,strrpos($names,'.')+1));//得到文件类型，并且都转化成小写
$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型
//把非法格式的图片去除
if (!in_array($type,$allow_type)){//检测图片后缀是否正确
unset($name[$key]);//函数，参数为name的值也就是图片的name值。
}
}
$str = '';//空字符串
foreach ($name as $key=>$item){//获取图片的时间；
$type = strtolower(substr($item,strrpos($item,'.')+1));//得到文件类型，并且都转化成小写
if (move_uploaded_file($file['tmp_name'][$key],$upload_path.time().$name[$key])){
$str .= ','.$upload_path.time().$name[$key];//将图片拼接一个当前时间
}else{
// echo '错误';
}
}
//向指定id插入图片地址（虽然是插入，但是是更新字段，不要迷糊了）
$uid = 1;//格式
$str = substr($str,1);//最后的值给$str然后将内容插入数据库
$sql = "INSERT INTO img ".
"(name) ".
"VALUES ".
"('$str')";
$retval = mysqli_query( $conn, $sql );
if(! $retval )
{
die('无法插入数据: ' . mysqli_error($conn));
}
echo "数据插入成功";
mysqli_close($conn);
?>
插入成功之后然后读取，和之前也不一样。我们要分解字段，然后将我们的图片循环输出出来。
<meta charset="UTF-8">
<style>
.image{
width: 150px;
height: 150px;
}
</style>
<?php
$dbhost = 'localhost:3306'; // mysql服务器主机地址
$dbuser = 'root'; // mysql用户名
$dbpass = 'root'; // mysql用户名密码
$conn = mysqli_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('连接失败: ' . mysqli_error($conn));
}
// 设置编码，防止中文乱码
mysqli_query($conn , "set names utf8");
mysqli_select_db( $conn, 'image' );
$sql = 'SELECT name FROM img';//查询数据库内容
$retval = mysqli_query( $conn, $sql );
if(! $retval )
{
die('无法读取数据: ' . mysqli_error($conn));
}
$picpath = '';//声明空字符串
while($row = mysqli_fetch_array($retval)){
$picpath = $row[0];//循环我们的第一个字段下面有打印，可查看。
// var_dump($picpath);exit;
}
$picpath = explode(',',$picpath);//分解指示符，将我们一个，分为一个数组。分为一部分。//下面可打印
// var_dump($picpath);exit;
$acs='';//声明空字符串
for($i=0; $i<count($picpath); $i++){//将$picpath内容，也就是每个图片的路径读取出来。
$acs=$picpath[$i];//将内容赋给我们的变量空。的字符串。
echo "<img class='image' src='".$acs."'>";//在img中运行。
}
mysqli_close($conn);
?>
到此这篇关于PHP实现多张图片上传功能的示例代码的文章就介绍到这了,更多相关PHP多张图片上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
如何利用PHP实现上传图片功能详解
HTML文件 一. 设置编码UTF-8 对于中文网页需要使用<meta charset="utf-8">声明编码,否则会出现乱码. 二 .form表单 <form>标签用于为用户输入创建 HTML 表单,表单里包含php文件路径, <form action="1.php"> 设置编码类型, 需要注意的是:默认情况下,enctype的值是application/x-www-form-urlencoded,不能用于文件上传,只有使用了
-
php多个文件及图片上传实例详解
本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下
-
php实现多张图片上传加水印技巧
复制代码 代码如下: <?php function imageWaterMark($groundImage,$waterPos=0,$waterImage="",$waterText="",$textFont=5,$textColor="#FF0000") { $isWaterImage = FALSE; $formatMsg = "暂不支持该文件格式,请用图片处理软件将图片转换为GIF.JPG.PNG格式."; //读
-
PHP实现一个按钮点击上传多个图片操作示例
本文实例讲述了PHP实现一个按钮点击上传多个图片.分享给大家供大家参考,具体如下: test.html 代码如下 <form action="upload.php" method="post" enctype="multipart/form-data"> <p>Pictures:<br /> <input type="file" name="pictures[]"
-
PHP实现多图片上传类实例
本文所述为一个实用的PHP多图片文件上传类,其支持gif.jpg.jpeg.pjpeg.png格式的多图片上传功能,类中还可限制图片类型.上传图片的大小.设置上传目录.一些提交判断等功能.此外该类并不局限于图片的上传,也可以上传TXT/RAR等文件类型,只是需要对代码进行一下修改,感兴趣的读者可以自己尝试一下. php多图片上传类完整功能代码如下: <?php class more_file_upload{ const FILE_PATH = '/uploadfile/'; //默认文件上传的目
-
PHP实现多张图片上传功能的示例代码
首先要知道这个函数 move_uploaded_file(); 接下来是我们的input框,和我们的html页面 这里我们是增加的input框我们也可以写写一个属性 multiple="multiple" 这样就可以ctrl多选图片了 <html> <head><title>多个文件上传表单</title></head> <body> <style> form{ margin: 20px; p
-
asp.net core集成CKEditor实现图片上传功能的示例代码
背景 本文为大家分享了asp.net core 如何集成CKEditor ,并实现图片上传功能的具体方法,供大家参考,具体内容如下. 准备工作 1.visual studio 2019 开发环境 2.net core 2.0 及以上版本 实现方法 1.新建asp.net core web项目 2.下载CKEditor 这里我们新建了一个系统自带的样本项目,去 CKEditor官网下载一个版本,解压后拷贝大wwwroot中 3.增加图片上传控制器 @using CompanyName.Projec
-
Java SpringBoot实现文件上传功能的示例代码
测试代码 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org
-
Golang实现图片上传功能的示例代码
目录 1.前端代码 2.JS代码 3.后端代码 该代码为使用beego实现前后端图片上传.话不多说,直接上代码. 1.前端代码 html代码: <div class="col-5 f-l text text-r">背景图(必须):</div> <div class="img-box"> <label> <span class="copy-btn Hui-iconfont"></s
-
ReactNative实现图片上传功能的示例代码
最近在学习ReactNative,ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App,今天就学习一下ReactNative实现图片上传功能 在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的. 如果我们的项目里需要使用图片上传(用js 实现图片上传),那我们有没有什么办法呢? 通过搜索React-native的github, 会发现里面有这么一篇文章:https://github
-
js纯前端实现腾讯cos文件上传功能的示例代码
前言 在前端开发中文件上传是经常会遇到的,并且多数情况会使用第三方平台来存储文件,腾讯云cos是我们常用的.本篇文章就是带我从前端的角度实现腾讯云COS存储.本文参考了腾讯云COS开发文档 JavaScript SDK 步骤 安装腾讯云COS上传所需的sdk 下载cos-js-sdk-v5.min.js并引入index.html 监听文件上传组件 //监听文件变化 document.getElementById('file').onchange = function() { let file =
-
webuploader 实现图片批量上传功能附实例代码
1.导入资源 2.JSP代码 <div class="page-container"> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目名称:</label> <div class="formCont
-
Java中使用fileupload组件实现文件上传功能的实例代码
使用fileupload组件的原因: Request对象提供了一个getInputStream()方法,通过这个方法可以读取到客户端提交过来的数据,但是由于用户可能会同时上传多个文件,在servlet中编程解析这些上传数据是一件非常麻烦的工作.为方便开发人员处理文件上传数据,Apache开源组织提供了一个用来处理表单文件上传的一个开源组件(Commons-fileupload),该组件性能优异,并且使用及其简单,可以让开发人员轻松实现web文件上传功能. 使用Commons-fileupload
-
Android头像上传功能的实现代码（获取头像加剪切）
因为项目中需要用到头像上传的功能,所以就下个Ddmo先来实现下. demo我是类似仿微信的,在一个GridView中展示所有的图片,其中第一个item可以去照相:获取到图片后再进行剪切. 图片的剪切是从网上找的感觉不错就用,暂时也没有测试. 获取图片可以用:https://github.com/lovetuzitong/MultiImageSelector来实现 这里的圆形图像是用https://github.com/hdodenhof/CircleImageView来实现的 Demo写的比较粗
-
Vue实现腾讯云点播视频上传功能的实现代码
基于Vue+ElementUI+vod-js-sdk-v6,完成腾讯云点播视频上传功能 最近做的一个项目,需要用到腾讯云点播的视频上传!!写一个尽可能详细的博客供各位参考,欢迎指正: ok,下面进入正题. 首先是需要用到的依赖:ElementUI.vod-js-sdk-v6.axios npm i vod-js-sdk-v6 npm i axios import vue from 'vue' import { Upload, Progress } from 'element-ui' vue.us