layui.js实现多⽂件上传前端html写法总结
最近需要写多⽂件上传功能,⽤到了layui.js控件,现进⾏总结,因为内容太多这⾥只总结了html页⾯的内容,java后台配置对接另⼀篇⽂
章《》,其实官⽹《》已经写的很详细了,我再啰嗦⼀下。
参考⽂章如下:
⾸先要进⾏的步骤:
1.下载layui.js相关⽂档,《》,下载之后⾥⾯的内容如下:
只需要把layui⽂件夹拷贝到⾃⼰项⽬中即可
2.页⾯引⼊,在⾃⼰要实现⽂件上传功能的html页⾯引⼊下⾯两个⽂件:
<script src="${basePath?if_exists}/demp/layui/layui.js" charset="utf-8"></script>
<link rel='stylesheet' href='${basePath?if_exists}/demp/layui/css/layui.css' media="all">
注:代码⾥的⽂件路径就是项⽬⾥的实际⽂件路径
3.具体在页⾯的⽤法可参考官⽹⽰例《》,因为本⼈按照官⽹的⽰例加了点东西,现在贴出来(注解中会分开说明⾃⼰添加的内容):
<body>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList" >选择场地模型⽂件</button>
<span >(上传的场地模型⽂件名称必须为:l、l、l或l)    <div class="layui-upload-list" >
<table class="layui-table">
<thead>
<tr><th>⽂件名</th>
<th>⼤⼩</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction" >开始上传</button>
</div>
<input type="hidden" id="isCoverSourceFile" name="isCoverSourceFile" value="">
<input type="hidden" id="schoolId" name="schoolId" value="">
</body>
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//多⽂件列表⽰例
var demoListView = $('#demoList')
,uploadListIns = der({
elem: '#testList'
,url: basePath + '/demp/model/uploadAreaFile.do?'
,data: {
schoolId: function(){
return $('#schoolId').val();
},
jquery下载文件请求isCoverSourceFile: function(){
return $('#isCoverSourceFile').val();
}
}
,accept: 'file'
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var school_id = $('#schoolId').val();
if(school_id == null || school_id =="" || school_id == undefined){
layer.msg("请选择驾校");
}
var files = this.files = obj.pushFile(); //将每次选择的⽂件追加到⽂件队列
//读取本地⽂件
obj.preview(function(index, file, result){
慕课网中国大学mooc客服
var tr = $(['<tr id="upload-'+ index +'">'
c语言实现网站注册登录,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,
'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的⽂件
<()[0].value = ''; //清空 input file 值,以免删除后出现同名⽂件不可选        });
demoListView.append(tr);
});
}
,done: function(res, index, upload){怎么开发软件视频教程
de == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span >上传成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除⽂件队列已经上传成功的⽂件
}else de == -2){ //上传提⽰
btn: ['是','否'] //按钮
}, function(){
if是什么函数
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
layer.closeAll('dialog');//关闭询问框
tds.eq(3).find('.demo-reload').click(); //触发重新上传点击事件
}, function(){
//和错误提⽰操作相同
<(index, upload,res.msg);
});
}else{
<(index, upload,res.msg);
}
}
,error: function(index, upload,msg){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span >'+msg+'</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显⽰重传
}
});
});
</script>
注:(1)函数⾥的url和ajax中的url原理相同,写法可参考ajax中的。
(2)传参数到后台写法如下:
<body>
指针数组和数组指针的区别和详解<input type="hidden" id="schoolId" name="schoolId" value="">
<input type="hidden" id="isCoverSourceFile" name="isCoverSourceFile" value="">
</body>
<script>
...
,data: {
schoolId: function(){
return $('#schoolId').val();
},
isCoverSourceFile: function(){
return $('#isCoverSourceFile').val();
}
}
...
</script>
(3)在done⽅法⾥和在⾥⾯的firm询问框调⽤errorr,两种写法如下所⽰:
var uploadListIns = der({
....
,done: function(res, index, upload){
de == 0){
btn: ['是','否'] //按钮
}, function(){
layer.msg("您选择了是")
}, function(){
layer.msg("您选择了否");
<(index, upload,res.msg);//对error⽅法的调⽤
});
}else{
<(index, upload,res.msg);//对error⽅法的调⽤
}
}
,error: function(index, upload,msg){
.
..
}
});

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。