layui实现单文件上传

layui单文件上传是真的恶心,你说用你的都是搞后端的,你功能提供的不全,还得让我一个一个去找,找到最后发现还没有这个功能!还得自己去实现!TMD!(本章主要解决单文件上传的一些恶心bug)

以下问题为非自动上传的一些问题

问题描述:第一次选好文件,再此点击上传文件,提交,后台台接收到多文件的问题。

问题原因:由于当你每点击一次确定时候,它都会在文件的队列里面添加上文件,不在乎你提交不提交。

解题思路:在点击确定文件时候加一个判断,判断队列的大小是否大于1,如果大于1就清除掉除最后一个文件的所有文件。

实现代码:如下图

function delAllFiles(allFiles){
	var lastindex=0;//最后一次的id(就是layui中的index)
		var fileSize=0;//文件队列数量
		//遍历,获取最后一个文件的下标index
		for (var x in allFiles) {
			lastindex=x;//保存最后一次index
			fileSize++;//由于没找到layui中文件队列的大小,所以自己定义了一个
		}
		//当文件队列大于1时
		if(fileSize>1){
			//删除其他文件,保留最后一个文件
			for (var x in allFiles) {
				if(x!=lastindex){
					delete allFiles[x];
				}
			}
		}
	}

下图是choose中的代码

var allFiles = obj.pushFile();//获取文件队列.就是这玩意,万恶之源。
delAllFiles(allFiles);//调用方法,删除多余文件

至此问题解决,不过我在实现单文件上传过程中还遇到挺多问题的,欢迎大家一起讨论。

layui一个轻量级的前端UI框架,它提供了一个易用的文件上传组件,可以方便地实现在页面上支持多文件上传的功能。在layui中,你可以通过以下步骤来实现文件上传: 1. 引入必要的库:首先,在HTML头部引入layui的CSS和JavaScript资源。 ```html <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/layui.css"> <script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script> ``` 2. 使用layui的upload模块:在需要上传文件的地方,创建一个`<input type="file">`元素,并加上layui上传插件属性,如`lay-upload`。 ```html <div id="uploadDemo" lay-upload="{limit: 5}" multiple></div> ``` 这里的`{limit: 5}`表示最多允许同时选择5个文件,`multiple`则开启多选模式。 3. 初始化上传:在JavaScript中,使用layui提供的`layui.use()`加载upload模块,并对`#uploadDemo`进行初始化。 ```javascript layui.use(['upload'], function(){ var upload = layui.upload; // 上传配置 var config = { elem: '#uploadDemo', url: '服务器接收上传文件的URL', // 服务器端接收地址 headers: { 'X-CSRF-TOKEN': token }, // 如果有token验证 before: function(file, req){ // 文件上传前处理 }, done: function(res, file){ // 上传成功后的回调函数,res为返回结果 }, error: function(err, file){ // 上传失败的回调函数,err为错误信息 } }; // 实例化上传 upload.init(config); }); ``` 4. 配置额外选项:你可以根据需要自定义更多的上传选项,例如设置文件类型、上传大小限制等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值