当前博客:layUI表单上传问题

91 次浏览【转载需注明来源】

博客作者:【临界点】

个性签名:寒窗苦读十年一朝凤舞九天

<!文档类型 网页类型>
<网页 语言代码="中文">
<网页头部>
    <网页信息 文档编码="UTF8">
    <网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假">
    <网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本">
    <网页标题>Document</网页标题>
</网页头部>
<网页主体>
    <表单 传输编码="文件传输编码" 类名="lay-表单">
            <区块 类名="lay-表单-项目 表单右边距" 行内样式="上边距: 30px;">
                <数据框标注 类名="lay-表单-标签"><行内元素 类名="星号颜色">*</行内元素>服务器名称</数据框标注>
                <区块 类名="lay-输入框-区块">
                    <数据框 属性名称="服务器名称" 类名="lay-输入框" 数据类型="文本输入" 数据值="" lay-验证="必填项">
                </区块>
            </区块>
            <区块 类名="lay-表单-项目 表单右边距">
                <数据框标注 类名="lay-表单-标签"><行内元素 类名="星号颜色">*</行内元素>服务器版本</数据框标注>
                <区块 类名="lay-输入框-区块">
                    <数据框 属性名称="服务器版本" 类名="lay-输入框" 数据类型="文本输入" 数据值="" lay-验证="必填项">
                </区块>
            </区块>
            <区块 类名="lay-表单-项目 表单右边距">
                <数据框标注 类名="lay-表单-标签"><行内元素 类名="星号颜色">*</行内元素>开服时间</数据框标注>
                <区块 类名="lay-输入框-区块">
                    <数据框 属性名称="开服时间" 类名="lay-输入框" 数据类型="文本输入" id="演示1" 数据值="" lay-验证="必填项">
                </区块>
            </区块>
            <区块 类名="lay-表单-项目 表单右边距">
                <数据框标注 类名="lay-表单-标签"><行内元素 类名="星号颜色">*</行内元素>游戏特色</数据框标注>
                <区块 类名="lay-输入框-区块">
                    <数据框 属性名称="游戏特殊" 类名="lay-输入框" 数据类型="文本输入" 数据值="" lay-验证="必填项">
                </区块>
            </区块>
            <区块 类名="lay-表单-项目 表单右边距">
                <数据框标注 类名="lay-表单-标签"><行内元素 类名="星号颜色">*</行内元素>QQ群号</数据框标注>
                <区块 类名="lay-输入框-区块">
                    <数据框 属性名称="QQ群号" 类名="lay-输入框" 数据类型="文本输入" 数据值="" lay-验证="必填项">
                </区块>
            </区块>
            <区块 类名="lay-表单-项目 表单右边距">
                <数据框标注 类名="lay-表单-标签"><行内元素 类名="星号颜色">*</行内元素>颜色排序</数据框标注>
                <区块 类名="lay-输入框-内联块">
                    <下拉列表 属性名称="排序" lay-验证="必填项">
                        <列表选项 列表值=""></列表选项>
                        <列表选项 列表值="0">浅黄色</列表选项>
                        <列表选项 列表值="1">浅绿色</列表选项>
                        <列表选项 列表值="2">深黄色</列表选项>
                    </下拉列表>
                </区块>
            </区块>
            <区块 类名="lay-表单-项目 表单右边距">
                <数据框标注 类名="lay-表单-标签"><行内元素 类名="星号颜色">*</行内元素>上下架时间</数据框标注>
                <区块 类名="lay-输入框-区块">
                    <数据框 属性名称="上架时间" 类名="lay-输入框" 数据类型="文本输入" id="演示9" lay-验证="必填项">
                </区块>
            </区块>
            <区块 类名="lay-表单-项目 表单右边距">
                <区块 类名="lay-按钮容器">
                  <按钮 id="文件上传" 按钮类型="普通按钮" 类名="lay-按钮">点击我传输文件到服务器</按钮>
                  <段落 id="当前进度">当前上传进度:0</段落>
                </区块>
            </区块>
            <区块 类名="lay-表单-项目">
                <按钮 按钮类型="普通按钮" 类名="lay-按钮 lay-流体按钮" id="提交" lay-提交="" lay-过滤器="提交" >提 交</按钮>
            </区块>
    </表单>
    <样式>
    .表单右边距{
        右边距: 30px;   
    }
    .星号颜色{
        颜色: 颜色值-红色;
    }
    @媒体查询 screen and (max-width: 450px){
        .lay-表单-项目 .lay-输入框-内联块 {
        左侧: 0px;
        外边距: 0 0 10px 110px;
        }
    }
    </样式>
    <脚本>
        新建对象 lay_上传({
                [lay_上传.配置.绑定元素]: "#上传"
            });
        // 普通时间选择器
        新建对象 lay_日期({
                [lay_日期.配置.绑定元素]: "#演示1",
            });
        //时间范围
            新建对象 lay_日期({
                [lay_日期.配置.绑定元素]: "#演示9",
                [lay_日期.配置.类型]: lay_日期.类型.日期时间,
                [lay_日期.配置.范围]: 真,
            });
            
            $(定义函数 () {
                lay_表单.表单提交事件(
                    "提交",
                    定义函数 (表单提交对象) {
                        局部变量 后端数据 = 网页访问_同步("/gshangchuan", 真,表单提交对象.字段);
                    },
                    假
                );
            });
            
            //注意:上传文件可以是任意的地址!
            局部变量 文件上传 = 新建对象 lay_上传({
                [lay_上传.配置.绑定元素]: "#文件上传",
                [lay_上传.配置.上传地址]: "/shangchuan",
                [lay_上传.配置.上传类型]:'file',
                //允许上传的文件类型,详情参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
                [lay_上传.配置.自动]: 假,
                [lay_上传.配置.选择]: 定义函数 (上传选择对象) {
                    //预读本地文件示例,不支持ie8
                },
                [lay_上传.配置.进度]: 定义函数 (n, elem, res, index) {
                    调试输出(n, elem, res, index);
                    //这里可以查看到上传到进度
                    $("#当前进度").设置或获取内容("当前传输进度:" + n);
                },
                [lay_上传.配置.完成]: 定义函数 (res, index, upload) {
                    $("#当前进度").设置或获取内容("恭喜您,上传文件成功!");
                }
            });

    </脚本>
</网页主体>
</网页>

 

我使用的是 网络访问提交的数据,但是我想提交表单数据的时候把文件数据一起提交上去,可是lay-上传功能有自己的独立上传API接口  不能和表单提交走一个接口 我要如何解决

默认排序
Generic placeholder image
Generic placeholder image
已采纳
临界点 Time: 2024-01-07 18:33:27
博主已经自己处理完问题并结帖
Generic placeholder image
轻声奏乐写代码 Time: 2024-01-06 21:44:11

想一起提交就考虑使用原生表单,数据框设置为文件类型;就是功能单调了点。

可以参考:https://bbs.fofstudio.net/ArticleForumInsidePage?page=1&id=16843777934741885

或者layui自带的上传功能,这个自带的上传功能上传后服务端可以返回对应的数据;你把返回的数据和表单一起提交就行,比如服务端返回一个json:{"数据名称":"",文件路径:""},你把这个json跟表单一起提交。

Generic placeholder image
临界点 回复 1楼 轻声奏乐写代码 Time: 2024-01-07 08:54:50

除了原生表单 其他的 都做不到 对吗

Generic placeholder image
临界点 Time: 2024-01-07 18:34:38

凡是靠自己 所有人都不靠谱


layUI表单上传问题