layui+php多图片连同表单提交并上传的方法

Question

如下多图和表单同时提交，后端php将path，表单的title，desc写入mysql，同时图片上传至服务器iamge文件夹，php详细代码该如何写（目前是PDO操作mysql）？

<div id="submitDiv">
       <form class="layui-form" id="albumform" >          
    <div class="layui-form-item">
    <div class="layui-input-block">
        <input type="text" id="title" name="title" required="" lay-verify="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
<div class="layui-input-block">
                <textarea id="desc" name="desc" required lay-verify="desc" placeholder="请输入" class="layui-textarea"></textarea>
</div>
</div>

<div class="layui-form-item">
    <div class="layui-input-inline">
        <select id="type" name="type" lay-filter="type" lay-search lay-verify="required" class="selectUp">
            <option value="">选择类型</option>
            <option value="1">公告类</option>
            <option value="2">分析案例</option>
        </select>
    </div>
</div>

<div class="layui-form-item">
    <div class="layui-input-block" style="margin-top:7px">
    <div class="layui-upload">
        <input type="text" id="imgs" style="margin:5px 0 15px 0" name="imgs" placeholder="图片路径只读 且最多可传六张" readonly  value="" required="" lay-verify="title"  autocomplete="off" class="layui-input ">
        <button type="button" class="layui-btn" id="selupimgs">选择图片</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top:10px;">
            预览图：
    <div class="layui-upload-list" style="display:flex;flex-wrap:wrap;" id="imgbox"></div>
    </div>
    </div>
</div>

<div class="layui-form-item">
        <div class="layui-input-block">
        <button type="button" class="layui-btn" id="upimgs">立即提交</button>
      </div>
    </form>
  </div> 


<script>
layui.use(['upload', 'element', 'layer'], function () {
  var $ = layui.jquery,
    upload = layui.upload,
    element = layui.element,
    layer = layui.layer;
    // 定义多图路径
    let path = ''
    //多图片上传定义实例
    let uploadInst= upload.render({
        elem: '#selupimgs',
        url: 'uploadimg', //改成您自己的上传接口
        multiple: true, // 是否支持多图上传
        size:4096,  // 上传大小限制kb
        auto: false, // 是否自动上传
        field:"img", // 上传字段名
        number:6, // 最多可上传六张
        acceptMime: 'image/*', // 上传文件类型
        bindAction:"#upimgs", // 触发上传的按钮
        choose: function (obj) {
            //将每次选择的文件追加到文件队列
            files = obj.pushFile();
            obj.preview(function (index, file, result) {
                let imgdom =  `<div style="position: relative;">
                <img id="lcimgs" src=${result} alt=${file.name} class="layui-upload-img" style=" height: 140px;margin:5px 3px;">
                <span  id="del${index}"  style="cursor: pointer; position: absolute;top: 10px;right: 10px;z-index: 100"  class="layui-badge">
                <i class="layui-icon layui-icon-delete"></i></span>
                </div> `
                $(".layui-upload-list").append(imgdom)
                //点击删除指定预上传图片
                $(`#del${index}`).on('click',function(){
                    layer.confirm('确定要删除么',e =>{
                        delete files[index];//删除指定图片
                        $(this).parent().remove();
                        layer.close(e);
                    })
                });
            })
        },
        before: function(obj){
            layer.load(1); //上传loading
        },
        done: function (res) {
            if(path==""){
                path = res.data
            }else{
                path = `${path},${res.data}`
            }
            $('input[name="imgs"]').val(path)
            console.log(res);
            //单个上传完毕
        },
        allDone: function(obj){ //当文件全部被提交后，才触发
            $("#subimg").bind("click",function () {
                 let data = {
                    title: $('#title').val(),
                    desc: $("#desc").val(),
                    path: path
                }
                $.post('add',data,function () {
                    if(res.data == 200){
                        xadmin.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    }
                })
                console.log('data',data)
                return false
            })
            $("#subimg").trigger('click')
            layer.closeAll('loading',{isOutAnim:true});
            layer.msg('上传完成！总共上传'+obj.total+'个，成功'+obj.successful+'个，失败'+obj.aborted+'个')
        },
        error:function () {
            layer.msg('上传失败,请稍后重试')
            layer.closeAll('loading',{isOutAnim:true});
            // uploadInst.upload();
        }
    })
})
</script>

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

你可以使用以下PHP代码来处理表单提交和图片上传的逻辑：

<?php
// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // 获取表单数据
    $title = $_POST['title'];
    $desc = $_POST['desc'];
    $path = $_POST['imgs'];

    // 将数据插入数据库
    $servername = 'localhost';
    $username = 'your_username';
    $password = 'your_password';
    $dbname = 'your_database';

    try {
        $conn = new PDO('mysql:host=$servername;dbname=$dbname', $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('INSERT INTO your_table (title, description, path) VALUES (:title, :desc, :path)');
        $stmt->bindParam(':title', $title);
        $stmt->bindParam(':desc', $desc);
        $stmt->bindParam(':path', $path);
        $stmt->execute();

        echo 'Data inserted successfully';
    } catch(PDOException $e) {
        echo 'Error: ' . $e->getMessage();
    }

    $conn = null;
}

// 处理图片上传
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['img'])) {
    $targetDir = 'image/';
    $allowTypes = array('jpg', 'png', 'jpeg', 'gif');

    $images = array();
    foreach ($_FILES['img']['tmp_name'] as $key => $tmp_name) {
        $fileName = $_FILES['img']['name'][$key];
        $fileType = pathinfo($fileName, PATHINFO_EXTENSION);

        if (in_array($fileType, $allowTypes)) {
            $targetFile = $targetDir . uniqid() . '.' . $fileType;
            if (move_uploaded_file($tmp_name, $targetFile)) {
                $images[] = $targetFile;
            }
        }
    }

    echo json_encode($images);
}
?>

请将上述代码保存为一个PHP文件，并将数据库连接信息和表名替换为你自己的信息。然后在你的服务器上运行该文件，确保文件上传目录（image文件夹）有适当的写入权限。

此外，你还需要在前端的JavaScript代码中修改上传接口的URL，将其指向你的PHP文件。

希望这可以帮助到你！