Thinkphp5 + ajax实现异步单个、批量上传图片

我们知道图片上传有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];
        }
    }
}

如果您有好的建议，或者代码有什么不足之处，欢迎留言。

Thinkphp5 + ajax实现异步单个、批量上传图片

猜你喜欢