当前位置：首页 > news >正文

layui+drogon完成文件上传（简例）

news 2025/8/6 8:31:45

layui界面加入按钮、文本框、进度条：

<div class="layui-row"><button type="button" class="layui-btn" id="file_upload_control">文件上传</button><input type="file" id="files_input" style="display: none" multiple>
</div><div class="layui-input-inline" style="margin-top: 1%;"><input disabled autocomplete="off" class="layui-input" id="file_chose"style="width: 198%;height: 30px; " type="text" maxlength="30"lay-verify="required" lay-vertype="tips" required="">
</div><div class="layui-row"><div class="layui-progress layui-progress-big" lay-filter="demoprogress" lay-showPercent="yes" id="upload_progress" style="width: 43%;margin-top: 1%;"><div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div></div>
</div>

js控制事件响应：


layui.use(['upload','element'], function() {var upload = layui.upload;var element = layui.element;element.init();var uploadInst = upload.render({elem: '#file_upload_control', url: '/api/v2/system/OTA/upload', acceptMime : '.tar.gz', exts:'tar.gz', number: 1, size: 102400*300, choose: function(obj) {UPLOAD_FILES = obj.pushFile();obj.preview(function (index, file, result) {document.getElementById('file_chose').value = file.name;});}, progress: function(value) {if (value == 100) {layer.msg('<div class="loading-wrapper"><span class="loading-icon"></span><span class="loading-text">文件上传完成，正在保存到本地</span></div>', {icon: 16,       // 图标shade: 0.01,    // 背景遮罩透明度time: 0,        // 0表示不自动关闭area: 'auto',   // 加载层的大小offset: 'auto', // 加载层的位置closeBtn: 0,    // 是否显示关闭按钮skin: 'custom-loading-layer' // 自定义样式类名});}element.progress('demoprogress', value+'%');}, done: function(res) {if(res.code == 0) {layer.closeAll('loading');layui.layer.alert('文件上传成功', { icon: 6 });for (let x in UPLOAD_FILES) {delete UPLOAD_FILES[x];}}else {layui.layer.alert('文件上传失败', { icon: 5 });}}, error: function () {layui.layer.msg("请求异常")}});
});