TypechoJoeTheme

至尊技术网

统计
登录
用户名
密码
/
注册
用户名
邮箱

Layui 多图片上传

2020-12-23
/
0 评论
/
66 阅读
/
正在检测是否收录...
12/23

1.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多图片上传</title>
    <link rel="stylesheet" href="layui/dist/css/layui.css">
    <style>
        .layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
</style>
</head>

<body>
    <form action="2.php" method="post" enctype="multipart/form-data">
        <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="emo2"></div>
        </blockquote>
        </div>
        <button type="button" id="file-btn">上传</button>
        <button type="submit" id="submit">提交</button>
    </form>
        <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="layui/dist/layui.js"></script>
        <!--<script>
            //自动上传
            layui.use('upload', function() {
                var $ = layui.jquery,
                    upload = layui.upload;
                upload.render({
                    elem: '#test2',
                    url: '1.php', //改成您自己的上传接口
                    multiple: true,
                    before: function(obj) {
                        //预读本地文件示例,不支持ie8
                        obj.preview(function(index, file, result) {
                            files = obj.pushFile();
                            $(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">')
                            $('#remove_' + index).bind('dblclick', function() { //双击删除指定预上传图片
                                delete files[index]; //删除指定图片
                                $(this).remove();
                            })

                            // console.log(1, index); //得到文件索引
                            // console.log(2, file.name); //得到文件对象
                            // console.log(3, result); //得到文件base64编码,比如图片

                            // $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                        });
                    },
                    done: function(res) {
                        //上传完毕
                        console.log(res);
                    }
                });
            })
        </script>-->
        <script>
            //非自动上传,需要点上传按钮后才会上传
            layui.use('upload', function() {
                var $ = layui.jquery,
                    upload = layui.upload;
                upload.render({
                    elem: '#test2',
                    url: '1.php',
                    auto: false //选择文件后不自动上传
                        ,
                    bindAction: '#file-btn' //指向一个按钮触发上传
                        ,
                    choose: function(obj) {
                        //将每次选择的文件追加到文件队列
                        var files = obj.pushFile();

                        //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
                        obj.preview(function(index, file, result) {
                            $(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">')
                            $('#remove_' + index).bind('dblclick', function() { //双击删除指定预上传图片
                                delete files[index]; //删除指定图片
                                $(this).remove();
                            })

                            // console.log(index); //得到文件索引
                            // console.log(file); //得到文件对象
                            // console.log(result); //得到文件base64编码,比如图片

                            //obj.resetFile(index, file, '123.jpg'); //重命名文件名,layui 2.3.0 开始新增

                            //这里还可以做一些 append 文件列表 DOM 的操作

                            //obj.upload(index, file); //对上传失败的单个文件重新上传,一般在某个事件中使用
                            //delete files[index]; //删除列表中对应的文件,一般在某个事件中使用
                        });
                    },
                    done: function(res) {
                        //上传完毕
                        console.log(res);
                    }
                });
            })
        </script>
</body>

</html>

1.php

<?php
header("Access-Control-Allow-Origin: *"); //解决跨域
header('Access-Control-Allow-Methods:post'); // 响应类型
date_default_timezone_set('PRC'); //获取当前时区

//生成随机字符串
function randStr($num = 6)
{
    $str = str_shuffle('abcedfghjkmnpqrstuvwxyzABCEDFGHJKMNPQRSTUVWXYZ0123456789');
    return substr($str, 0, $num);
}

//获取文件后缀
function getExt($filename)
{
    return strrchr($filename, '.');
}

$date = date('Y/m/d'); //获取年月日
define('BASE_PATH', str_replace('\\', '/', realpath(dirname(__FILE__) . '/')) . "/");
$dir = "upload/" . $date . "/"; //判断是否有对应的文件
$file = $dir . time() . randStr() . getExt($_FILES["file"]["name"]); //上传文件的名字
$arr = array(
    'code' => 0, //返回状态
    'msg' => '', //提示消息
    'data' => array( //文件链接
        'src' => $file,
    ),
);

$dir = BASE_PATH . $dir;
$file = BASE_PATH . $file;

$file_info = $_FILES['file']; //前端传过来的文件
$file_error = $file_info['error'];

if (!is_dir($dir)) { //判断目录是否存在
    mkdir($dir, 0777, true); //如果目录不存在则创建目录
}

if (!file_exists($file)) {
//判断文件中是否有相同的文件
    if ($file_error == 0) {
        if (move_uploaded_file($_FILES["file"]["tmp_name"], $file)) {
            $arr['msg'] = "上传成功";
        } else {
            $arr['msg'] = "上传失败";
        }
    } else {
        switch ($file_error) {
            case 1:
                $arr['msg'] = '上传文件超过了PHP配置文件中upload_max_filesize选项的值';
                break;
            case 2:
                $arr['msg'] = '超过了表单max_file_size限制的大小';
                break;
            case 3:
                $arr['msg'] = '文件部分被上传';
                break;
            case 4:
                $arr['msg'] = '没有选择上传文件';
                break;
            case 6:
                $arr['msg'] = '没有找到临时文件';
                break;
            case 7:
            case 8:
                $arr['msg'] = '系统错误';
                break;
        }
    }
} else {
    $arr['code'] = "1";
    $arr['msg'] = "当前目录中,文件" . $file . "已存在";
}
echo json_encode($arr); //将遍历好的数组反给前端
经验jsPHPLayui文件上传
朗读
赞(0)
版权属于:

至尊技术网

本文链接:

https://www.zzwll.cn/archives/4982/(转载时请注明本文出处及文章链接)

评论 (0)