本文介绍了一个使用JavaScript实现的Excel文件上传功能，通过在页面上创建导入按钮，利用layer弹窗插件展示上传界面。在JS中，通过`upload()`函数打开上传对话框，`submit()`函数负责提交表单，并进行文件格式校验。当用户选择的文件为.xls或.xlsx格式时，使用AjaxSubmit进行后台上传。后端代码部分未展示，但提供了参考路径。
Excel导入：
页面创建导入按钮，如：
代码：
导入交易
JS：
function upload(){
layer.open({
type : 2, //层类型
title :'导入文件', //标题
shadeClose : true,//是否点击遮罩关闭
shade : [ 0.4, '#000' ], //遮罩
maxmin : false, //开启最大化最小化按钮
area : [ '460px', '350px' ],//设置宽高
offset : '5px',//坐标，默认：垂直水平居中
moveout : true,//是否允许拖拽到窗口外
content : "" //iframe的url //内容这里是路径
})
}
可以将上传文件放入form表单中，上传文件框用input框的file类型，如：
点击确定时submit提交表单，js如下所示：
function submit(){
//提交前校验
if(!checkDate()){
return;
}
//定义并开启上传时读取效果
var msgIndex = layer.load(1, {
shade: [0.4,'#def'], //0.4透明度的白色背景
icon : ''
});
//上传
$("#addMore").ajaxSubmit({
type : "post",
url : Const.apiUrl + "", //上传路径
dataType : "json",
success : function(resp){
layer.close(msgIndex);//关闭效果
if(resp.code == 200){
layer.open({
area: ['40%', '60%'],
title: '导入文件',
content: '成功导入信息'+resp.data+'条',
btn : ['确定'],
yes : function(index, layero) {
layer.closeAll();
}
});
}else{
layer.msg("导入失败！");
}
},
error : function(code) {
layer.close(msgIndex);
layer.msg("服务器错误,导入失败！");
}
});
}
function checkDate(){
//获取上传的文件路径
var fileName = $("#file").val();
//获取上传的文件名
var fName = fileName.substring(fileName.lastIndexOf("\\")+1,fileName.lastIndexOf("."));
//获取上传的文件后缀
var fType = fileName.substr(fileName.lastIndexOf("."));
//判断有没有文件
if(fName == ""){
layer.msg("请选择需要导入的.xls或者.xlsx文件！");
return false;
}
//判断文件格式是否正确
if(!fType || fType.toLowerCase()!=".xls" && fType.toLowerCase()!=".xlsx"){
layer.msg("请选择.xls或者.xlsx格式的文件导入！");
return false；
}
return true;
}
以上为前端页面代码，后端代码可参考：
扫一扫
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
