版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34439125/article/details/86381588
我们知道图片上传有form表单、ajax上传。单个图片上传还好,批量上传form表单就有些力不从心了,所以以下示例笔者用ajax实现,本文的图片上传目前仅支持pc端,后续会补充移动端,如果你遇到了图片批量上传的场景,笔者的思路及实现方法希望可以对你有些帮助,话不多说,前端代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片上传示例</title>
<style>
.img-list,.img-list .title{
display: flex;
justify-content: center;
align-items: center
}
.img-list .title,.img-list .list{
min-height: 200px;
max-height: 600px;
}
.img-list .list li{
display: inline-block;
position:relative;
}
.img-list .list li img{
width:400px;
}
.hide{
display: none !important;
}
</style>
</head>
<body>
<div class="img-list">
<div class="title">还没有添加</div>
<ul class="list">
//展示图片
</ul>
</div>
//这里需要注意的是multiple属性,如果需要多选,你就得加上它
<input name="image" type="file" id="upload" multiple="multiple">
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
//图片上传我这里用的change事件触发,upload_fun函数是上传图片的核心,为什么我不使用匿名函数?后面会提到
//我使用的jquery的缓存id属性为0,这个0代表上传了的图片数量,也代表upload_fun函数执行了几次。默认0为1次。
$('#upload').data('id', 0).change(upload_fun);
function upload_fun() {
//假设我上传了一张图片,触发change事件后
var $this = $('#upload');
var file = $this[0]; //获得dom对象
var imgSum = file.files.length; //图片数量,就是你选择了的图片数量。
var uploadSum = $this.data('id'); //上传了的图片数量 也代表函数执行了几次,之前有提到,默认为0。
var formFile = new FormData(); //FormData是异步上传的前提,不懂请百度。
formFile.append('image', file.files[uploadSum]);//这里是把文件存到FormData中,uploadSum是0,也就是第一张图片,1就是第二张,依次类推。
$.ajax({
url: "{:url('carousel/uploadImage')}", //请求路径没什么可说的
type: "POST",
data: formFile, //注意参数
contentType: false,
processData: false,
dataType: 'json',
success: function (data) {
uploadSum++; //如果上传成功,上传了的数量就+1
$this.data('id', uploadSum); //将缓存更新
//获取到后台地址后,赋给img标签并插入dom
$('.img- list').children('.title').addClass('hide').siblings('.list').removeClass('hide')
.append('<li><img src="' + data.path + '"></li>');
//判断上传了的图片数量 是否小于 选择了的图片数量
if (uploadSum < imgSum) {
//如果小于就递归调用该方法,这下你知道我在change中为什么不用匿名函数了吧。
upload_fun();//这里调用后upload_fun函数中formFile.append('image', file.files[uploadSum])中的uploadSum就会变为1,也就是第二张图片。相信到这里你已经明白了,我是把你选择的一组图片,一张一张上传到服务器,这样可以减轻服务器并发的压力,也不降低了出错的几率。当然如果你上传一张就执行一次。
} else {
//当图片都上传完成后,上传了的图片数量归0,input值也清空。
$this.data('id', 0).val('');
}
},
error: function (error) {
//错误你来处理吧。
console.log(error);
}
})
}
</script>
</html>
由于时间仓促,目前代码还不完善,仅仅是提供了一些思路,后续会加上加载条等等,下面是后台php代码,框架是thinkphp5
<?php
namespace app\admin\controller;
use think\Controller;
class Carousel extends Controller
{
public function index()
{
return $this->fetch();
}
//轮播图片上传
public function uploadImage()
{
$file = request()->file('image');//获取上传图片
// 移动到框架应用根目录/public/uploads/ 目录下
if ($file) {
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if ($info) {
$img = $info->getSaveName();//获取名称
$imgpath = DS . 'uploads' . DS . $img;
$path = str_replace(DS, "/", $imgpath);//数据库存储路径
$save = model('Carousel')->save(['path' => $path]);
return ['status' => 1, 'path' => $path];
} else {
$message = '图片上传失败';
return ['status' => 0, 'message' => $message];
}
} else {
$message = '图片上传失败';
return ['status' => 0, 'message' => $message];
}
}
}
如果您有好的建议,或者代码有什么不足之处,欢迎留言。