layui 表单和文件上传一起传到后台

9 篇文章 0 订阅

HTML代码

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">尾灯名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入尾灯名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>上传图标
            </button>
            <br><br>
            <div style="width:200px;height:200px;border:3px solid #0099CC;border-radius: 5px;padding: 3px;">
                <img style="max-width: 200px;max-height:200px;" id="preview">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="commit" onclick="return false">立即提交</button>
        </div>
    </div>
</form>

JavaScript代码

<script>
    layui.use(['form', 'layer', 'upload'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var $ = layui.jquery;

        upload.render({
            elem: '#upload',
            url: '{:U("addTL")}',
            auto: false,//选择文件后不自动上传
            bindAction: '#commit',
            //上传前的回调
            before: function () {
                this.data = {
                    name: $('input[name="name"]').val()
                }
            },
            //选择文件后的回调
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#preview').attr('src', result);
                })
            },
            //操作成功的回调
            done: function (res, index, upload) {
                var code = res.code === 0 ? 1 : 2;
                layer.alert(res.msg, {icon: code}, function () {
                    parent.window.location.reload();
                })
            },
            //上传错误回调
            error: function (index, upload) {
                layer.alert('上传失败!' + index);
            }
        });
    })
</script>

安利一门Python超级好课!
扫码下单输优惠码【csdnfxzs】再减5元,比官网还便宜!

  • 1
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
要将Layui文件上传到数据库中,需要进行以下步骤: 1. 在后端服务器上安装数据库,并创建一个用于存储文件的数据库和表。表需要包含一个用于存储文件二进制数据的字段,以及其他文件相关的元数据字段,比如文件名、文件大小、文件类型等。 2. 在前端页面中使用Layui的upload模块,编写文件上传表单代码,并使用ajax将文件数据提交到后端服务器。 3. 在后端服务器上编写接收文件数据的代码,并使用数据库驱动程序连接到数据库,将文件数据插入到指定的数据库和表中。 下面是一个示例代码,用于演示如何将Layui文件上传到MySQL数据库。 前端代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui文件上传到MySQL数据库</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <form class="layui-form" action="" enctype="multipart/form-data"> <div class="layui-form-item"> <label class="layui-form-label">选择文件</label> <div class="layui-input-block"> <input type="file" name="file" lay-verify="required"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">上传</button> </div> </div> </form> </div> </div> <script src="layui/layui.js"></script> <script> layui.use(['form', 'jquery', 'upload'], function(){ var form = layui.form; var $ = layui.jquery; var upload = layui.upload; //文件上传 var uploadInst = upload.render({ elem: '#test1', url: 'upload.php', accept: 'file', exts: 'jpg|png|gif|bmp|jpeg', done: function(res){ if (res.code == 0) { layer.msg('上传成功'); } else { layer.msg('上传失败:' + res.msg); } }, error: function(){ layer.msg('上传失败'); } }); }); </script> </body> </html> ``` 后端代码(使用PHP语言): ```php <?php //连接数据库 $servername = "localhost"; $username = "root"; $password = "123456"; $dbname = "test"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } //接收文件数据 $file = $_FILES['file']; $fileName = $file['name']; $fileSize = $file['size']; $fileType = $file['type']; $fileError = $file['error']; $tmpName = $file['tmp_name']; //读取文件内容 $fileContent = addslashes(fread(fopen($tmpName, 'r'), $fileSize)); //插入数据到数据库 $sql = "INSERT INTO file (name, size, type, content) VALUES ('$fileName', '$fileSize', '$fileType', '$fileContent')"; if ($conn->query($sql) === TRUE) { $result['code'] = 0; $result['msg'] = '上传成功'; } else { $result['code'] = -1; $result['msg'] = '上传失败:' . $conn->error; } echo json_encode($result); $conn->close(); ?> ``` 在这个示例代码中,我们将文件数据上传到了名为`test`的MySQL数据库中的`file`表中,表中包含`name`、`size`、`type`和`content`四个字段。你需要根据自己的实际情况修改代码中的数据库连接信息和表结构。注意,文件内容需要使用`addslashes()`函数转义,以免出现特殊字符导致的SQL注入问题。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

成长中de大神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值