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

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("请求异常")
	    }
    });
});

完结～