使用layui.upload上传文件与使用layer.open方式上传文件
程序员文章站
2022-04-08 09:27:34
...
使用layui.upload上传文件与使用layer.open方式上传文件。上传文件的方式有很多种，这里简单介绍以下两种方式。
第一种：layui.upload上传文件
layui.use(['layer','upload'], function () {
var upload = layui.upload;
//指定允许上传的文件类型
upload.render({
elem: '#uploadExcel'//绑定导入按钮
,url: '/api/upload/file_excel' //上传请求接口地址
,accept: 'file' //普通文件
,exts: 'xls|excel|xlsx' //配置上传格式
,done: function(res){
console.log(res)
layer.msg(res.message);
}
});
});
第二种：使用layer.open上传文件
1.绑定导出事件
function custexcelimport(){
layer.open({
title: '导入数据',
type: 2,
offset: 'auto',
skin: 'layui-layer-demo', //样式类名
closeBtn: 1, //不显示关闭按钮
anim: 3, //弹出层样式
shadeClose: false, //开启遮罩关闭
area: ['340px', '200px'],
content:'../mx/importbusinessbill.jsp',
end: function () {
var handle_status = $("#handle_status").val();
var handle_data = $("#handle_data").val();
handle_data = JSON.parse(handle_data);
if ( handle_status == '0' ) {
layer.confirm(handle_data.msg, {btn: ['确定']},
function(index) {
if(index){
layer.close(index);
location.reload();
}
});
}else if(handle_status == '1'){
location.reload();
}
}
});
}
2.导入按钮与返回绑定数据的标签
<div id="mywin"></div>
<input id="handle_data" value="" hidden="hidden">
<input id="handle_status" value="" hidden="hidden">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="custexcelimport()">导入</button>
3.导入弹出页
<script type="text/javascript">
function submitConfirm(){
var index = parent.layer.getFrameIndex(window.name);
if($('#uploadfile').val()==''){
$.messager.alert('错误','请选择要上传的Excel文件','error');
return;
}
if (!$('#uploadfile').val().toLowerCase().endWith('.xls')) {
$.messager.alert('错误','文件类型不是xls文件','error');
return;
}
$.messager.confirm('信息', "确定导入?", function(r) {
if (r) {
$.messager.progress();
$('#myform').ajaxSubmit({
url:"../importExcel.action",
type: "post",
success : function(data) {
data = JSON.parse(data);
$.messager.progress('close');
parent.layer.close(index);
if(data.success == false){
data = JSON.stringify(data);
parent.$("#handle_status").val("0");
parent.$("#handle_data").val(data);
parent.layer.close(index);
}else{
data = JSON.stringify(data);
parent.$("#handle_status").val("1");
parent.$("#handle_data").val(data);
parent.layer.close(index);
}
}
});
}
});
}
function closetab() {
parent.$('#mywin').window('close');
}
</script>
<style type="text/css">
.datagrid-btable .datagrid-cell{padding:6px 4px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.ctable {
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center',border:false" style="padding:10px;">
<form name="myform" id="myform" method="post" enctype="multipart/form-data">
<div style="width: 100%; height: 100px;">
<table class="ctable" cellpadding="0" cellspacing="0" width="80%" border="0">
<tr style="font-size: 13px">
<td>
<p>
请选择要上传的Excel文件,xls格式:<!-- <a href="../download/businessbillcust.xls">参考模版下载</a> --><br>
<br>
<input type="file" id="uploadfile" name="uploadfile" class="textbox">
</p>
</td>
</tr>
</table>
</div>
</form>
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;margin-bottom:10px;">
<center>
<a id="Submitbtn" name="Submitbtn" style="width: 100px;height: 25px" class="easyui-linkbutton c6" onclick="submitConfirm()">导入</a>
</center>
</div>
</div>
</body>
上一篇： Javaweb文件上传的一个简单工具类