tp5框架使用layui实现文件上传(上代码)

最新推荐文章于 2024-04-29 06:58:38 发布

ha-哈

最新推荐文章于 2024-04-29 06:58:38 发布

阅读量2.3k

点赞数

文章标签：文件上传

本文链接：https://blog.csdn.net/wr_edu/article/details/92794855

版权

本文通过实例代码详细介绍了如何在ThinkPHP5框架下结合layui前端组件实现文件上传功能，包括HTML、JavaScript和PHP后端的实现细节。

摘要由CSDN通过智能技术生成

html代码

<div class="layui-upload">
   <button type="button" class="layui-btn" id="cover1">上传头像</button>
</div>
<div class="layui-input-inline">
    <img id="preview1" width="200px" height="200px" >
</div>
<input type="hidden" name="head_photo" id="head_photo1">
<div>(上传限制在2M内)</div>

js代码

//添加学生头像
layui.use(['upload','jquery'],function () {
    $ = layui.jquery;
    var uploadInst = layui.upload.render({
        elem:'#cover1'
        ,url:"{:url('Student/upload')}"
        ,accept:'file'  // 允许上传的文件类型
        ,auto:true // 自动上传
        ,before:function (obj) {
            console.log(obj);
            // 预览
            obj.preview(function(index,file,result) {
                // console.log(