layui的upload.render 选择文件后清空上一次选择的文件
温馨提示:
本文最后更新于 2022年09月01日,已超过 574 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
解决多次上传,每次上传的文件累加自动多队列上传的问题,每次上传只上传最新的。
第一种解决思路:取当前上传队列最后一个索引的文件上传,上传成功后清空其他文件
upload.render({
elem: '#LAY-excel-upload', //绑定元素
url: MODULE_PATH + '/upload',//上传接口(PS:这里不用传递整个 excel)
accept: 'file',
auto: false, //选择文件后不自动上传 点击按钮触发
data:{"canshu":"参数"},//@RequestParam(value="canshu", required = false)String canshu 后台接收
bindAction: '#uploadAction', //指向一个按钮触发上传
exts: 'xls|xlsx',
choose: function (obj) {// 选择文件回调
var files = obj.pushFile();
<!-- 开始 -->
//上传时 文件存进layui的文件上传队列,会出现重复校验第一次上传文件,设置校验删除之前历史文件
var lastX=0;
var fileCount=0;
//遍历,获取最后一个文件的下标索引
for (var x in files) {
//x是文件对象的唯一索引,是个字符串,例如:1612418956647-0
lastX=x;
fileCount++;
}
if(fileCount>1){
//删除其他文件,保留最后一个文件
for (var x in files) {
if(x != lastX){
delete files[x];
}
}
}
<!-- 结束 -->
var fileArr = Object.values(files);// 注意这里的数据需要是数组,所以需要转换一下
uploadExcel(fileArr); //上传校验 如果只需要最新选择的文件,可以这样写: uploadExcel([files.pop()])
},
before: function(obj){
layer.load();
},
done: function(res, index, upload){
layer.close(layer.load());
//导入后 回调函数
},
error:function(){
layer.close(layer.load());
}
});
第二种解决思路:就是在回方法 choose 中 通过 UPLOAD_FILES = obj.pushFile(); 将它的返回值用一个变量存起来, 在文件上传成后把UPLOAD_FILES 这个变量里的文件全部删除, 因为我找了一下 layui 的文件上传好像没有提供可以获取所有文件的api方法
同理选择文件后将上一次选择的文件删除也一样, 因为用户选择文件时肯定会选择错, 如果不将上一次选择的文件删除的话就会导致文件队列里有多个文件,同而上传多次(我是指一次只能上次一个文件的情况下, 如用户选择头像之类的)
在这种情况也是一样,进入choose方法时不管它,先把所有的文件删除再说,然后再当前文件pushFile()进去就可以了
let UPLOAD_FILES;
function clearFile() {
for (let x in UPLOAD_FILES) {
delete UPLOAD_FILES[x];
}
}
var scz = true;
layui.use('upload', function () {
var upload = layui.upload;
//多图片上传
upload.render({
elem: '#test2'
, url: ''
, multiple: false
, auto: false
, accept: 'file' //普通文件
, exts: 'xls||xlsx'
, size: 307200
, choose: function (obj) {
UPLOAD_FILES = obj.pushFile();
clearFile(); //将所有文件先删除再说
obj.preview(function (index, file, result) {
$('#selected').attr('src', result);
obj.pushFile();
});
var files = obj.pushFile();
obj.preview(function (index, file, result) {
保存值的地方= files[index].name.substring(0, files[index].name.indexOf("."));
})
scz = true;
}
, data: {
}
, bindAction: '#test3'
, before: function (e) {
if (scz) {
}
}, done: function (res, index, upload) {
clearFile();
top.layer.msg(res.msg);
scz = false;
}
});
});
无法重新上传同名文件思路:需要清空已上传的缓存,所以要先前端清空清除layui的文件队列缓存
obj.pushFile()
会将已选择的文件存进layui的文件上传队列,同时返回队列对象。我们需要拿到那个队列只能这么干,即使不需要手动存进队列。
var UPLOAD_FILES;
upload.render({
elem: '#uploadFile', //绑定元素
// url: '/property/importData', //上传接口
url: '/...', //上传接口
method: 'POST',
auto: false,
accept: 'file',
bindAction: '#uploadBtn',
size: 102400*30,//限制文件大小300M
multiple: false,
choose:function(obj){
UPLOAD_FILES = obj.pushFile();
obj.preview(function(index, file, result){
if(file.name.length>0) {
choose_file_flag=true;
checkExcel(excel);
//重置input文件上传框,清理fileList
if(!choose_file_flag){
//清除文件缓存,不然无法上传同名文件
$('.layui-upload-file').attr('type', 'hidden');
$('.layui-upload-file').attr('type', 'file');
clearFile();
}
}
});
},
before: function(obj) {
},
done: function(res, index, upload) {//上传完毕回调
}
,error: function() {//请求异常回调
}
});
//清空文件队列
function clearFile(){
for (let x in UPLOAD_FILES) {
delete UPLOAD_FILES[x];
}
}
正文到此结束
- 本文标签: 前端 LayUI 文件上传
- 本文链接: http://www.92cxy.cn/article/33
- 版权声明: 本文由王小东原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
相关文章
该篇文章的评论功能已被站长关闭