layui上传文件的接口怎么写?

提问 已结 8 485
uni_up
uni_up 2020-2-16
悬赏:20飞吻
版本:layui 2.5.6 浏览器:Chrome
layui上传文件的url接口怎么写?怎么把文件的相关信息传送到PHP后台?除了layui,我没有用任何框架,要是直接用表单,倒是简单,但是到layui,没有表单就不会了
回帖
  • CrazyYi
    2020-2-16
    @uni_up

    1、HTML
        <div class="layui-inline">
    <!-- 注意这里的id,和event -->
    <button class="layui-btn layui-btn-sm" id="uploadExcel" lay-event="uploadExcel">
    <i class="layui-icon layui-icon-upload"></i>上传导入
    </button>
    </div>
    2、JS
        const defaultOptions = {
    elem: '#uploadExcel', //绑定元素(就是刚才HTML中的id)
    url: undefined, //上传接口,根据自己的定义
    accept: 'file', // 对应后台代码中的action【非常重要,就是第一个参数名】
    exts: "xls|xlsx", // 扩展名
    field: "file",
    acceptMime: "file/xls,file/xlsx",
    previewId: undefined,

    before: function (obj) {
    let othis = this;
    // 预读本地文件示例,不支持ie8
    if (!!othis.previewId) {
    obj.preview(function (index, file, result) {
    $('#' + othis.previewId).attr('src', result); //图片链接(base64)
    });
    }
    },
    done: function (res) {
    //上传完毕回调
    let othis = this;

    if (res.code === 0) {
    layer.msg('上传成功');
    table.reload(gMainTable.id, gMainTable);
    } else {
    layer.msg('上传失败=' + res.msg);
    }
    },
    error: function (index, upload) {
    //请求异常回调
    layer.msg('很抱歉,上传出现异常,请联系技术人员');
    }
    };
    3、后台(针对原生PHP。我这没有,就写一个类似的供你参考)
    <?php
    if ($_FILES["file"]["error"] > 0)
    {
    echo "错误:" . $_FILES["file"]["error"] . "<br>";
    }
    else
    {
    echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
    echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
    echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"];
    }
    ?>
    0 回复
  • apopen
    2020-2-16
    layui上传文件,如果知道参数怎么设置就挺简单的,你看我问的问题里面有代码。后台的PHP通过FILE接受就可以,返回个JSON。
    0 回复
  • apopen
    2020-2-16
    //选完文件后不自动上传
    upload.render({
    elem: '#test8'
    ,url: 'test.php' //改成您自己的上传接口
    ,accept: 'file' //普通文件
    ,exts: 'xls|xlsx' //只允许上传excel文件
    ,size: 2048 //限制文件大小,单位 KB
    ,auto: false
    ,bindAction: '#test9'
    ,done: function(res){
    layer.msg('上传成功');
    console.log(res);
    }
    });
    0 回复
  • uni_up
    2020-2-16
    @apopen 这些参数我知道,就是test.php里面不知道怎么接收,原生PHP里面,$_FILES[][]数组是二维数组,第一个参数是input=file那个表单的name值,但是layui里面没有input=file,我就不知道怎么接收了
    0 回复
  • apopen
    2020-2-16
    @uni_up 我写的一个代码你参考下:test.php
    <?php
    $success = array("code"=>0,"msg"=>"ok","count"=>$_FILES["file"]["size");

    //重命名文件
    $filename = time()."-".$_FILES["file"]["name"];
    // 判断当期目录下的 upload 目录是否存在该文件
    // 如果没有 upload 目录,你需要创建它,upload 目录权限为 777
    if (file_exists("../../uploads/" . $filename)){
    echo $filename . " 文件已经存在。 ";
    }
    else{
    // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
    move_uploaded_file($_FILES["file"]["tmp_name"], "../../uploads/" . $filename);
    //echo "文件存储在: " . "/uploads/" . $filename . "<br/>";
    }

    echo json_encode($success); //返回给前端
    ?>
    0 回复
  • uni_up
    2020-2-16
    @CrazyYi 谢谢,改成file就上传成功了!官方的文档里没说这个怎么设置,害的我真是一顿苦恼啊!
    0 回复
  • uni_up
    2020-2-16
    @apopen 嗯嗯,借鉴!
    0 回复
  • CrazyYi
    2020-2-16
    @uni_up
    是的。文档上一般不说这些。所以我专门在示例中给你标注了那个字段。前后端就是通过这个字段建立联系。

    因此你可以在同一个页面,同时有多个上传按钮。每个按钮就可以通过这个字段来和后台的不同操作进行关联和区分。
    0 回复