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实现多图片上传的更多相关文章

  1. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  2. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  4. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  5. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  6. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  7. TinyMCE的使用（包括汉化及本地图片上传功能）

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  8. 包含修改字体，图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

  9. PHP多图片上传实例demo

    upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  10. .NET MVC实现多图片上传并附带参数（ajaxfileupload）

    做网站呢,都免不了要做图片上传. 还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上 ...

随机推荐

  1. js自动切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. PHP资源网站收藏

    PHP之道 http://laravel-china.github.io/php-the-right-way/#use_the_current_stable_version http://www.ph ...

  3. 【工业串口和网络软件通讯平台(SuperIO)教程】五.二次开发图形显示界面

    SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1    图形显示接口的作用 用于显示采集终端设备的数据,可以把不同类型设备的数据以多种形式集成显示在不 ...

  4. jquery固定在顶部的导航菜单

    体验效果:http://hovertree.com/texiao/jquery/6.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  5. iOS UITableView删除cell分割线

    UITableView是UITableViewStylePlain风格的,这样整个TableView都会被分割线分隔开,不管有没有数据,非常丑. 为了可以自定义cell的分割线: 解决方案: 将UIT ...

  6. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q105-Q108)

    Question  105   You are designing a SharePoint 2010 application that contains a single list named Us ...

  7. iOS之设置头像（访问系统相册、本地上传）

    1. UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:                               ...

  8. JDBC的操作

    package com.liuxianglin.demo.util; import java.sql.Connection; import java.sql.DriverManager; import ...

  9. CLR线程概览（一）

    托管 vs. 原生线程 托管代码在“托管线程”上执行,(托管线程)与操作系统提供的原生线程不同.原生线程是在物理机器上执行的原生代码序列:而托管线程则是在CLR虚拟机上执行的虚拟线程. 正如JIT解释 ...

  10. RedHat 4下无resize2fs命令

    在Red Hat Enterprise Linux AS release 4上进行LVM扩展分区时,发现RedHat 4下没有resize2fs,不过可以用ext2online替换resize2fs. ...