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 实现图片上传(包括附带参数上 ...
随机推荐
- [moka同学摘录]SQL内联、外联的简单理解
(源自:http://blog.csdn.net/kkk9127/article/details/1487686) --查询分析器中执行:--建表table1,table2:create table ...
- 高性能 Socket 组件 HP-Socket v3.2.1 正式发布
HP-Socket 是一套通用的高性能 TCP/UDP Socket 组件,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C++.C ...
- Atitit.提升 升级类库框架后的api代码兼容性设计指南
Atitit.提升 升级类库框架后的api代码兼容性设计指南 1. 增加api直接增加,版本号在注释上面增加1 2. 废弃api,使用主见@dep1 3. 修改api,1 4. 修改依赖import, ...
- 【requireJS源码学习02】data-main加载的实现
前言 经过昨天的学习,我们大概了解到了requireJS的主要结构,这里先大概的回顾一下 首先从总体结构来说,require这里分为三块: ① newContext之前变量声明或者一些工具函数 ② n ...
- jQuery实现checkbox反选(转载)
//反选 $("#btnInvert").click(function () { //1.方法一实现反选 $("#chk input:checkbox").ea ...
- 解决sea.js引用jQuery提示$ is not a function的问题
在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...
- IIS10中使用OpenSSL来创建CA并且签发SSL证书
参考: http://www.cnblogs.com/lierle/p/5140187.html http://alvinhu.com/blog/2013/06/12/creating-a-certi ...
- iOS 中常用的对密码进行MD5加密
iOS中MD5加密 标签(空格分隔): iOS MD5 + (NSString *)MD5:(NSString *)str { const char *cStr = [str UTF8String]; ...
- Android项目实战（十三）：浅谈EventBus
概述: EventBus是一款针对Android优化的发布/订阅事件总线. 主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service. 线程之 ...
- shell脚本执行时报"bad interpreter: Text file busy"的解决方法
在执行一个shell脚本时,遇到了“-bash: ./killSession.sh: /bin/bash: bad interpreter: Text file busy”错误提示,如下所示: [or ...