PHP上传多张图片预览并回显，支持PC端与移动端

这几天在做一个小项目，其中有一个功能是php上传多张图片并且要有预览，回显，删除等功能。支持PC端与移动端。

上传文件我们第一时间想到的是表单里面的type=file方法。没错，我们就是用这种方法来实现。

我查网上资料的时候，很多用ajax来提交数据，这里我们直接用submit按钮来实现，很传统，适合小白学习用，也可用于项目当中。
首先来看看代码：

<input class="uploadImg" type="file" name="file[]" multiple id="file" accept="image/jpeg ,image/png,image/gif">

解释：

multiple 代表是可以上传多张图，如果没有只能单张图片。
name=“file[]” 代表可以获取多个图片数组，如果只是name=“file”，只能获取一个图片。
accept 代表接受上传的文件类型，这里我们只接受jpg,png,gif,其他不支持。
效果图：

接下来我们来美化一下上传的界面，我们用一张图片代替
效果图：

一、整个css代码如下(包括回显的CSS)：

.uploadImgBtn {
width: 100px;
height: 100px;
cursor: pointer;
position: relative;
background: url("images/pic.jpg") no-repeat;
-webkit-background-size: cover;
background-size: cover;
margin-top:10px;
float:left;
}
.uploadImgBtn .uploadImg {
position: absolute;
right: 0;
top:0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
//这是一个用做回显的盒子的样式
.uppic .pic{
width: 100px;
height: 100px;
float:left;
}
.uppic .pic img {
width: 100px;
height: 100px;
float:left;
margin-left:1px;
margin-top:10px
}
.uppic .pic span{
background:url('images/close.png') no-repeat;
width:20px;
height:20px;
color:#fff;
text-align:center;
border-radius:50%;
position:absolute;
margin-left:-15px;
margin-top:5px;
cursor: pointer;
}

二、html界面的代码如下：

<div class="field field-text-field col-sm-12" data-type="TextField" >
<div class="form-group" >
<div class="field-label-container">
<label class="field-label font-family-inherit" >
健康码拍照上传(选择上传图片（最多5个）、限制每个10MB以内)
</label></div>
<div class="field-content uppic" id="uppic">
<div class="uploadImgBtn" id="uploadImgBtn">
<input class="uploadImg" type="file" name="file[]" multiple id="file" accept="image/jpeg ,image/png,image/gif">
</div>
</div>
</div>
</div>

回显示问题我们用JS来处理，JS处理流程我们来分析一下：

1.通过点击上传事件(上图那个相机按钮), 在点击事件里面我们处理一下file,我们用on()方法添加的change事件，判断file有没有被改变，如果改变了，说明你已经选了一个或多个图片了。

2.通过JS创建DOM标签，比如:div img等，把它把放到该显示的位置。

3.把上传的图片的file的结果传值给img标签中的src属性。这样就达到了回显的效果了。

4.最后每次上传图片时，让它自动生成一个及清除之前写死的id

简单来讲就是四步：
1、先获取input标签
2、给input标签绑定change事件
3、把图片回显
4、自动生成一个表单file

三、整个JS代码如下：

$(document).ready(function(){
//为外面的盒子绑定一个点击事件
$("#uploadImgBtn").click(function(){
//1、先回去input标签
var $input = $("#file");
//2、给input标签绑定change事件
$input.on("change" , function(){
//3、回显
$.each(files,function(key,value){
//每次都只会遍历一个图片数据
var div = document.createElement("div"),
img = document.createElement("img");
div.className = "pic";
var fr = new FileReader();
fr.onload = function(){
img.src=this.result;
div.appendChild(img);
document.getElementById("uppic").appendChild(div);
}
fr.readAsDataURL(value);
})
})
//4、我们把当前input标签的id属性remove
$input.removeAttr("id");
var newInput = '<input class="uploadImg" type="file" name="file[]" multiple id="file" accept="image/jpeg ,image/png,image/gif">';
$(this).append($(newInput));
})
})

上传效果图：

四、最后就是submit提交之后保存上传的图片到本地

提交之后，接收到的是一个数组，长什么样呢？如下：

分析一下这个结构：

我们的文件名在name中，图片的类型在type中，临时文件名在tmp_name中，错误信息在error中，0代表没有问题，文件的大小在size中，单位是B。

多个图片的话，我们必须要循环出来才行，可以用foreach()

处理原理步骤分析：

1.通过$File = $_FILES[‘file’];接收所有上传的图片

2.foreach()循环出所有的file信息

3.判断是不是图片或大小是不是符合要求，用if判断一下

4.用file_exists来检查下有没有重名

5.用move_uploaded_file将图片保存到本地

整个接收的代码如下：

<?php
$File = $_FILES['file'];
$strr="";
print_r("<pre>");
print_r($File);
foreach( $File['name'] as $Key => $FileName ) {
$FileNames = $FileName; //上传的文件来名
$FileTypes = $File['type'][$Key];//上传的文件类型
$FileSize = $File['size'][$Key];//上传的文件大小
$FileTmps = $File['tmp_name'][$Key]; //上传的文件副本
//判断图片上传有没有错误
if($FileNames)
{
//如果没有错误，判断条件是不是图片
if(($FileTypes=="image/png"||$FileTypes=="image/jpeg") && $FileSize<10240000)
{
//防止文件重名
$path="/upload/jiankang_ma/".time().$FileNames;
$re_path=str_replace(',','',$path);
$path_filename=$_SERVER['DOCUMENT_ROOT'].$re_path;
$path_filename=iconv("UTF-8","gb2312",$path_filename);
if(file_exists($path_filename)){
echo "<script>alert('你上传的图片重名了');history.back();</script>";
exit;
}else{
//保存图片文件,用move_uploaded_file将上传的文件移动至新位置
if(move_uploaded_file($FileTmps,$path_filename)){
echo "<script>alert('上传成功了');history.back();</script>";
}else{
echo "<script>alert('上传错误，请重新上传！');history.back();</script>";
exit;
}
}
}else{
echo "<script>alert('你上传的图片格式不对！');history.back();</script>";
exit;
}
}
}
?>

最后你可以将图片的地址保存到数据库中，这里就不讲解了，你们有什么问题可以直接找我，一起探讨，一起解决。

最后希望得到您的关注、转发、点赞、支持。

这里有一个弊端，就是如果我传错了，能不能删除后再上传，未来我会通过ajax来解决这个问题。