PHP实现多图片上传
PHP实现多图片上传
今天在工作中遇到了一个需求：一个表单实现多个上传图片，类似于QQ空间上传照片的模式。即：可以一次性上传多个图片，但是封面图片只有一个。
最先，最重要的事，在服务器上对文件进行读写操作的时候，一定要看权限，如果没有权限，全是虾扯蛋，为什么这样说，因为全是泪。
首先，前端页面：index.html
<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>
知识点：
1.通过JS动态添加input结点和设置属性，当大于3个上传图片的时候就不再给予上传图片的机会了。
2.这里最主要的是input输入框的name值，通过动态的添加数组元素，将所有上传的图片动态添加到数组当中。
后端处理功能
Connection.php
1.读取和存储都需要用到连接数据库，所以可以把它封住一下，养成良好的习惯
<?php
//创建对象并打开连接，最后一个参数是选择的数据库名称
$mysqli = new mysqli('localhost','root','','test');
//检查连接是否成功
if (mysqli_connect_errno()){
//注意mysqli_connect_error()新特性
die('Unable to connect!'). mysqli_connect_error();
}
pic.php处理功能
<?php
require_once 'connection.php';
$file = $_FILES['myfile']; //得到传输的数据,以数组的形式
$name = $file['name']; //得到文件名称，以数组的形式
$upload_path = "zhouqi666.cn/test/images/"; //上传文件的存放路径
//当前位置
foreach ($name as $k=>$names){
$type = strtolower(substr($names,strrpos($names,'.')+1));//得到文件类型，并且都转化成小写
$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型
//把非法格式的图片去除
if (!in_array($type,$allow_type)){
unset($name[$k]);
}
}
$str = '';
foreach ($name as $k=>$item){
$type = strtolower(substr($item,strrpos($item,'.')+1));//得到文件类型，并且都转化成小写
if (move_uploaded_file($file['tmp_name'][$k],$upload_path.time().$name[$k])){
//$str .= ','.$upload_path.time().$name[$k];
echo 'success';
}else{
echo 'failed';
}
}
//向指定id插入图片地址（虽然是插入，但是是更新字段，不要迷糊了）
$uid = 1;
$str = substr($str,1);
$sql = "UPDATE upload set pic = '".$str."' WHERE id = ".$uid;
$result = $mysqli->query($sql);
这里我有很多的判断没有写，主要是实现一下功能，比如文件夹要先建立好，你也可以自己判断，不存在就创建一个文件夹，还有一些其他判断等等。
最关键的地方是，当你不熟悉的时候，要走一步调试一步，看得到的结果是什么。
图片现实功能
<?php
require_once 'connection.php';
$uid = 1;
$sql = "SELECT pic FROM upload WHERE id =".$uid;
$result = $mysqli->query($sql);
//取出第一个图片的地址
$picpath = '';
while ($row = $result->fetch_array()){
$picpath = $row[0];
}
$picpath = explode(',',$picpath)[0];
echo "<img src='".$picpath."'>";
?>
PHP实现多图片上传的更多相关文章
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- JS图片上传预览插件制作（兼容到IE6）
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- TinyMCE的使用（包括汉化及本地图片上传功能）
TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...
- 包含修改字体，图片上传等功能的文本输入框-Bootstrap
通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...
- PHP多图片上传实例demo
upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- .NET MVC实现多图片上传并附带参数（ajaxfileupload）
做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ...
随机推荐
- No.021：Merge Two Sorted Lists
问题: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...
- 用R语言的quantreg包进行分位数回归
什么是分位数回归 分位数回归(Quantile Regression)是计量经济学的研究前沿方向之一,它利用解释变量的多个分位数(例如四分位.十分位.百分位等)来得到被解释变量的条件分布的相应的分位数 ...
- 学习笔记：Asp.Net MVC更新部分页面
Asp.Net MVC 更新部分页面 设想我们有一篇文章下面的提交评论时如何只刷新评论内容部分, 方法一,利用ajax通过js代码实现. 方法二,利用Ajax.BeginForm()+部分视图实现. ...
- js instanceof
a instanceof b: 1,首先a不是对象,返回false,b的原型不是对象抛出TypeError 2,取得b的prototype标记为bp,对a的原型链做循环,令ap为当前原型,如果ap与b ...
- 独立IP 与 共享IP
最近在阿里云产品体系中折腾的不亦乐乎,在选则服务器的时候,会有独立IP和共享IP的两种不同的选择,这里查阅资料予以记录,独立IP与共享IP的区别: 因为IP资源有限,独立IP就是说一个IP地址只给你一 ...
- Egret白鹭H5小游戏开发入门（二）
前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...
- HTML DOM 教程
HTML DOM DOM 教程 DOM 简介 DOM 节点 DOM 方法 DOM 属性 DOM 访问 DOM 修改 DOM 内容 DOM 元素 DOM 事件 DOM 导航 一,HTML DOM 简介 ...
- Android开发3：Intent、Bundle的使用和ListView的应用 、RelativeLayout(相对布局)简述（简单通讯录的实现）
前言 啦啦啦~博主又来骚扰大家啦~大家是不是感觉上次的Android开发博文有点长呢~主要是因为博主也是小白,在做实验的过程中查询了很多很多概念,努力去理解每一个知识点,才完成了最终的实验.还有就是随 ...
- NodeJS（node.exe, npm, express, live-server）安装
1．下载node.exe 下载https://nodejs.org/en/download/current/ 创建D:\GreenSoftware\NodeJS目录,并将node.exe放到目录中. ...
- Android Couldn't load BaiduMapSDK
什么都不用多说,看代码 Couldn't load BaiduMapSDK_v3_2_0_15 from loader dalvik.system.PathClassLoader[DexPathLis ...