Layui文件上传带进度条

最近项目有个需求,要求文件上传有实时进度条,前端框架使用的是layui,但是layui的文件上传(upload)和进度条并没有做结合,这里只能靠改源码的方式实现之,折腾了蛮久,最后还是在公司前端的帮助下完成了,感谢。

1.修改layui文件上传ajax的代码:

这里使用的是layui(2.4.3版本)的非模块化 (layui.all.js),模块化请修改modules/upload.js

直接复制粘接进去即可:

xhr:function () {
	var newXhr = i.ajaxSettings.xhr();
	// 给xhr的upload添加progress的监听
	newXhr.upload.addEventListener('progress' , function (e) {
		var percent = Math.floor(e.loaded / e.total * 100); //计算出进度
		typeof l.progress === 'function' && l.progress(e , percent); // 传递给upload的progress回调
	});
	return newXhr;
},

2.页面以及upload

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文件上传进度条</title>
		<script src="../static/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../static/css/layui.css" />
	</head>

	<body>
		<button type="button" class="layui-btn" id="chooseFile">
  			<i class="layui-icon">&#xe67c;</i>选择文件
		</button> 文件名称: <span id="fileName"></span>
		<div style="height: 20px;"></div>
		<button type="button" class="layui-btn" id="uploadBtn">
  			<i class="layui-icon">&#xe67c;</i>上传文件
		</button>
		<div style="height: 20px;"></div>
		<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
			<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
		</div>
		<script type="text/javascript">
			var upload = layui.upload,
				element = layui.element;
			element.init();
			
			
			upload.render({
				elem: '#chooseFile', // 文件选择
				accept:'file',
				url: '/fileUpload',
				auto: false, // 设置不自动提交
				bindAction: '#uploadBtn', // 提交按钮
				progress: function(e , percent) {
					console.log("进度:" + percent + '%');
					element.progress('progressBar',percent  + '%');
				},
				choose: function(obj) {
					obj.preview(function(index, file, result) {
						$("#fileName").html(file.name);
					});
				},
				done: function(res) {
					layer.msg(res.msg);
				},
				error: function(res) {
					layer.msg(res.msg);
				}
			});
		</script>
	</body>
</html>

测试:

搞定!有疑问欢迎留言,反正我也解答不上来哈哈哈。

### 使用Layui框架实现文件上传进度条功能 #### 修改`upload.js`模块 为了使Layui的上传功能进度条,需先修改位于Layui包下的`upload.js`模块。此操作涉及对原有代码进行扩展,加入对上传过程中的事件监听机制,以便能够捕获并处理上传进度的变化[^1]。 ```javascript // 假设这是经过适当调整后的部分代码片段用于支持进度跟踪 onprogress: function(data){ var percent = (data.loaded / data.total * 100)|0; element.progress('demo', percent+'%'); // 更新进度条状态 } ``` #### 页面HTML结构与JavaScript初始化 在页面端,则需要构建合适的DOM元素来承载进度条,并通过调用Layui的相关API完成配置工作。下面给出的是一个简单的例子,展示了如何设置表单以及关联必要的回调函数以反映上传进展[^2]。 ```html <!-- HTML --> <div class="layui-progress" lay-showpercent="true" id="uploadProgress"> <div class="layui-progress-bar"></div> </div> <button type="button" class="layui-btn" id="testUpload">点击上传</button> ``` ```javascript // JavaScript 初始化 layui.use(['upload', 'element'], function(){ var upload = layui.upload; var element = layui.element; // 创建一个上传实例 upload.render({ elem: '#testUpload' ,url: '/api/upload' // 替换成实际接口地址 ,done: function(res){ console.log(res); } ,error: function(){ console.error("上传失败"); }, progress: function(n, elem){ // 添加进度条逻辑 element.progress('uploadProgress', n + '%'); } }); }); ``` 上述代码实现了当用户选择文件并通过按钮触发上传动作时,在界面上动态更新表示当前传输比例的视觉提示。这不仅提升了用户体验,也使得开发者可以更直观地监控整个流程的状态变化[^3]。
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值