基于Layui上传组件（upload）的动态增加上传组件并使得每个上传组件都可独立上传

演示基于laravel框架

1.编写html元素（可根据实际需求进行编写）

2.引入layui相关css,js

3.编写upload组件实例化公共调用方法，首次加载页面需要初始化，因此需要调用upload实例公共方法

4.编写新增dom方法，清空新增dom中的旧数据并调用upload实例公共方法，使得每个upload实例都可以使用

注意：由于每个upload组件的绑定节点必须唯一，因此在新增dom时，需要为upload组件动态生成不同的绑定节点名称，否则，upload组件将无法拉起图片选择

<link rel="stylesheet" href="layui/css/layui.css">
<style>.h4_2rem {font-size:2rem;}.width_10percent {width:10%;}.width_15percent {width:15%;}.width_20percent {width:20%;}.width_30percent {width:30%;}.width_90percent {width:90%;}.width_100percent {width:100%;}.panel .width_35percent {width:35%;}.panel .width_50percent {width:50%;}.panel .width_70percent {width:70%;}.panel .width_90percent {width:90%;}.panel .width_100percent {width:100%;}.panel .width_95px {width:95px;}.star {color: red;}/* todo 额外样式 *//* todo 课程封面 */.image-container img {cursor: pointer;height:100px;width:100px;line-height: 100px;text-align: center;}.layui-upload-list {margin-top:0;}
</style>
<div class="panel panel-default"><div class="panel-body"><form class="layui-form layui-form-pane" onsubmit="return false"><h4 class="h4_2rem"></h4><hr /><div class="layui-form-item"><button class="btn btn-default" id="add-firstPart-button"><i class="glyphicon glyphicon-plus"></i>新增</button></div>{{-- 标题、内容 --}}<div class="outer-container"><div class="layui-form-item inner-container"><div class="layui-inline width_10percent"><label class="layui-form-label" title="icon">icon</label><div class="layui-input-inline width_70percent"><input type="hidden" name="icon_img" lay-verify="" /><div class="layui-upload-list image-container icon-image-container" ><img src="static/images/default_upload_bg_img.png" alt=""></div></div></div></div></div></form></div>
</div><script src="layui/layui.all.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>layui.use(['form','upload','layer'], function(){var form = layui.form,layer = layui.layer,upload = layui.upload;{{-- todo 增加上传内容 --}}let firstPartNumber = 1;$('#add-firstPart-button').on('click',function () {addDom($(this),firstPartNumber);let newDomName = 'icon-image-container'+'-'+firstPartNumber;{{-- 新增DOM --}}let newDom = $(this).parent('.layui-form-item').next('.outer-container').find('.inner-container').last(0);newDom.find('.image-container').addClass(newDomName)iconImageUploadInit('.'+newDomName){{-- 清空图片链接 --}}newDom.find('img').attr('src','static/images/default_upload_bg_img.png')firstPartNumber++;});{{-- todo 实例化icon上传组件 --}}function iconImageUploadInit(dom = '.icon-image-container'){return uploadInit(upload,dom,{prefix:'offline-icon-img-courses'},{{-- 预读本地文件 --}}function(obj){let imgContainer = this.item;obj.preview(function(index, file, result){imgContainer.find('img').attr('src',result).attr('alt',file.name)});},{{-- 上传完成回调 --}}function(res) {if (res.code == 0) {let imgContainer = this.item.prev('input[name=icon_img]');imgContainer.val(res.data);} else {this.error(index, upload);layer.msg(res.msg);}},{{-- 上传异常回调 --}}function(index, upload) {this.item.find('img').attr('src','static/images/default_upload_bg_img.png')this.item.prev('input[name=icon_img]').val('');},'jpg|png',500);}{{-- todo 初始化icon上传组件 --}}iconImageUploadInit();{{-- todo 删除内容 --}}$('.outer-container').on('click','.del-container',function () {delDom($(this));});{{-- todo 统一增加DOM方法 --}}function addDom(buttonDom,number){let outContainerDom = buttonDom.parent('.layui-form-item').next('.outer-container');let innerContainerDom = outContainerDom.find('.inner-container');let html = '<div class="layui-form-item inner-container" data-id="'+number+'">';html += innerContainerDom.html();{{-- 删除按钮 --}}html += '<div class="layui-inline width_10percent">';html += '<div class="layui-input-inline width_70percent">';html += '<button class="btn btn-danger del-container">删除</button>';html += '</div>';html += '</div>';html += '</div>';outContainerDom.find('.inner-container').last(0).after(html);form.render();{{-- 清空表单 --}}outContainerDom.find('.inner-container').last(0).find('input').val('');outContainerDom.find('.inner-container').last(0).find('select').val('');outContainerDom.find('.inner-container').last(0).find('textarea').val('');}{{-- todo 统一删除DOM方法 --}}function delDom(buttonDom){layer.confirm('请确定是否继续操作',function () {buttonDom.parents('.inner-container').remove();layer.closeAll('dialog');});}/*** todo 上传图片* @param upload layui的upload实例* @param bindDomName 绑定DOM,点击拉起选择图片框* @param data 上传接口的额外参数* @param beforeFunction 文件提交上传前的回调* @param doneFunction 执行上传请求后的回调* @param errorFunction 执行上传请求出现异常的回调* @param exts 允许上传的文件后缀* @param size 允许上传大小(kb)* @param bindButtonDom auto=false时的触发上传请求DOM* @param number 上传图片数量* @returns {*}*/function uploadInit(upload,bindDomName = '',data = {},beforeFunction = function(obj) {},doneFunction = function(res) {},errorFunction = function(){},exts = '',size = 0,bindButtonDom = '',number = 1){return upload.render({elem: bindDomName,url: '/admin/upload/image',exts: exts,size: size,headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},multiple: true,number: number,auto: !bindButtonDom,bindAction: bindButtonDom,data: data,before: beforeFunction,done: doneFunction,error: errorFunction});}});
</script>

基于Layui上传组件（upload）的动态增加上传组件并使得每个上传组件都可独立上传相关推荐

layui 表格组件中实现动态增加数据行的一种方式
layui 以界面简洁美观而吸引了不少开发人员,在使用table组件时,需要能编辑表格内容,动态增加数据行.编辑功能组件已支持.但动态增加数据行好像没有支持,网上提供的方式是,获得组件的数据集再加入一 ...
基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载前言 js代码页面使用(我这里用的是uploader.jsp) CSS文件上传效果总结前言项目需求完成文件上传,可以拖拽上传文件/文 ...
antd上传组件upload+阿里oss实现上传功能
antd上传组件upload+阿里oss实现上传功能阿里oss上传是目前前端同事比较习惯使用的上传方式,同样的上传方式还是七牛等,下面记录以下阿里oss上传的使用步骤: 最近在写后台管理系统,遇到上 ...
layui 文件上传（upload）实例重载及重新上传
layui 文件上传(upload)实例重载及重新上传平时的话是真用不到这两个东西,咱先不考虑其他问题,直接看接口,是这样的:1,用户上传文件(这是个接口),上传完之后会返回上传的数据,进行回显,预 ...
基于layui的框架模版，采用模块化设计，接口分离，组件化思想
代码地址如下: http://www.demodashi.com/demo/13362.html 1. 准备工作编辑器vscode,需要安装liveServer插件在前端开启静态服务器或者使用hb ...
服务器上传文件进度,Java动态显示文件上传进度实现代码
本文实例实现文件上传的进度显示,我们先看看都有哪些问题我们要解决. 1 上传数据的处理进度跟踪 2 进度数据在用户页面的显示就这么2个问题, 第一个问题,主要是组件的选择必须支持数据处理侦听或通知 ...
layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
基于layui的动态添加条件查询ui插件
layuiExtend 项目介绍最近做一个档案系统,发现字段超多,查询页面布局不是很好弄,于是就想着干脆写一个动态添加条件的ui插件. 因为是用的layui框架写的系统,所以就直接基于layui编写 ...
servlet+javabean+jdbc+mysql基于MVC模式的课件管理系统，有三个表的增删改查和课件搜索、课件上传、课件下载功能，具体功能请看界面上的导航条
源码支持在idea.eclipse.myeclipse运行,数据库采用MySQL数据库,项目采用mvc设计模式开发,页面采用jsp+html+css+js完成. servlet+javabean+jd ...

基于Layui上传组件（upload）的动态增加上传组件并使得每个上传组件都可独立上传

基于Layui上传组件（upload）的动态增加上传组件并使得每个上传组件都可独立上传相关推荐

最新文章

热门文章