IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Layer数据表格中每一行文件上传 -> 正文阅读

[JavaScript知识库]Layer数据表格中每一行文件上传

一、前言

  • 需要在数据表格每一行加一个上传按钮
  • 问题:点击上传,弹出选择文件框了,选择 打开(O) 之后并没有执行上传操作

二、html 部分代码

<script type="text/html" id="uploadPicTpl">
    <a class="layui-btn layui-btn-normal layui-btn-xs upload-pic">
        上传
    </a>
</script>

三、js 部分代码

layui.define(function(exports) {
    layui.use(['layer', 'table','upload'], function () {
        let $ = layui.$
            ,layer = layui.layer
            ,table = layui.table
            ,upload = layui.upload;

        table.render({
            elem: '#LAY-user-table'
            ,url: '/././.'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', width: 80, title: 'ID', sort: true}
                ,{field: 'content', title: '图片', templet: '#uploadPicTpl', minWidth: 400}
                ,...
            ]]
            ,done: function (res) {
                let tableId = this.id;

                let tableElem = this.elem;
                let tableViewElem = tableElem.next();
                let uploadElem = tableViewElem.find('.upload-pic');

                res.data.forEach((item) => {
                    //item.id 根据这个id绑定数据

                    //上传插件
                    upload.render({
                        url: '/index/upload/file'
                        ,elem: uploadElem
                        ,size: 10 * 1024 //最大上传10MB
                        ,done: function(res){
                            if (res.code == 100) {

                            } else {

                            }
                        }
                    });
                });
            }
        });



    });

    exports('user', {});
});
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-05 11:09:15  更:2022-05-05 11:10:55 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:51:42-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码