tp5.1使用layui实现多文件上传

最新推荐文章于 2023-04-15 16:55:05 发布

php菜鸟爱好者

最新推荐文章于 2023-04-15 16:55:05 发布

阅读量813

点赞数

分类专栏： php学习文章标签： php js

本文链接：https://blog.csdn.net/ajxaxnaax/article/details/109061559

版权

php学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、layui多文件上传

其实,使用layui多文件上传不过就是多次的单文件上传罢了,废话不多说,直接上代码。

二、代码

1.前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>uploadmany</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="test2">多图片上传</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="demo2"></div>
    </blockquote>
</div>
<script src="/static/layui/layui.all.js"></script>
<script>
    layui.use(['upload'], function(){
        var upload = layui.upload;
        var $=layui.jquery;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test2' //绑定元素
            ,url: '/test/layui/ajaxupload' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="50">')
                });
            }
            ,multiple: true
            ,done: function(res){
                console.log(res);
            }
            ,error: function(){
                //请求异常回调
            }
        });
        });
</script>
</body>
</html>

2.php

public function ajaxupload(){
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('file');
       // dump($file);
        // 移动到框架应用根目录/uploads/ 目录下
        $info = $file->move( '../public/static/uploads');
        if($info){
            // 成功上传后 获取上传信息
            // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
            $data['data']= ['src'=>$info->getSaveName()];
            $data['code']=0;
            $data['msg']='上传成功';
            echo json_encode($data);
        }else{
            // 上传失败获取错误信息
            echo $file->getError();
        }
    }


    public function uploadmany(){
        return view();
    }