<link rel="stylesheet" href="__STATIC__/layui2.5.5/css/layui.css">
<div class="layui-form-item">
<label class="layui-form-label">项目文件label>
<div class="layui-input-block">
<div class="layui-upload-drag" id="test10">
<i class="layui-icon">i>
<p>点击上传，或将文件拖拽到此处p>
div>
div>
<br/>
<div class="layui-progress" lay-filter="demo" lay-showPercent="true">
<div class="layui-progress-bar" lay-percent="0%">
</div>
</div>
</div>
JS：
<script src="__STATIC__/layui2.5.5/layui.js">script>
路径改为自己的本地js路劲即可
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
var element = layui.element;
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//拖拽上传
var uploadInst =upload.render({
elem: '#test10'
,url: "{:url('upload/upload_word')}"
,exts: 'doc|docx'
,progress: function(n){
var percent = n '%' //获取进度百分比
//配合 layui 进度条元素使用(这是进度条的方法，这个方法放到element的方法中)
element.progress('demo', percent);
}
,done: function(res){
if(res.code == 1){
success("上传成功");
}
}
});
});
});，今天小编就来说说关于layui动态生成条件组件?下面更多详细答案一起来看看吧!
layui动态生成条件组件
<link rel="stylesheet" href="__STATIC__/layui2.5.5/css/layui.css">
<div class="layui-form-item">
<label class="layui-form-label">项目文件label>
<div class="layui-input-block">
<div class="layui-upload-drag" id="test10">
<i class="layui-icon">i>
<p>点击上传，或将文件拖拽到此处p>
div>
div>
<br/>
<div class="layui-progress" lay-filter="demo" lay-showPercent="true">
<div class="layui-progress-bar" lay-percent="0%">
</div>
</div>
</div>
JS：
<script src="__STATIC__/layui2.5.5/layui.js">script>
路径改为自己的本地js路劲即可
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
var element = layui.element;
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//拖拽上传
var uploadInst =upload.render({
elem: '#test10'
,url: "{:url('upload/upload_word')}"
,exts: 'doc|docx'
,progress: function(n){
var percent = n '%' //获取进度百分比
//配合 layui 进度条元素使用(这是进度条的方法，这个方法放到element的方法中)
element.progress('demo', percent);
}
,done: function(res){
if(res.code == 1){
success("上传成功！");
}
}
});
});
});
作者：科技小锅盖
链接:https://www.xiaoguogai.cn/detail/id/28.html
著作权归*科技小锅盖*所有，任何形式的转载注明出处。
,
