Redmi K40系列 发布会重点总结
Redmi K40系列 发布会重点总结
2021-02-26 16:13:30
全部数码
全部科技
全部技术
【亲测】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("上传成功！");
}
}
});
});
});
陕ICP备20008812号 |
科技小锅盖 保留所有权利 |
网站地图 |