layer.open弹出框导入excel表格文件js中获取上传文件内容的解决方法

最新推荐文章于 2024-08-08 07:59:44 发布

太阳520

最新推荐文章于 2024-08-08 07:59:44 发布

阅读量5k

点赞数 2

分类专栏： web前端文章标签： html js

本文链接：https://blog.csdn.net/qq_25647409/article/details/80421325

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.首先是页面有一个批量导入的按钮，代码如下：

<a v-if="hasPermission('org:orgmainfo:save')" @click="importInfo" class="btn btn-primary" data-toggle="tooltip" data-placement="left" ><i class="fa fa-folder-open-o"></i> 批量导入</a>

2.点击按钮后弹出框的页面内容代码如下：

<div id="importBox" v-show="!showListBtn">
				<form id="importForm" method="post" enctype="multipart/form-data"
					  style="padding-left:20px;text-align:center;"><br/>
					<input id="importFile" name="file" type="file" style="width:330px"/>仅允许导入“xls”或“xlsx”格式文件！<br/>　　
				</form>
			</div>

3.js中的弹出方法以及上传的ajax如下：

注：content字段必须是jQuery("#importBox")或者$("#importBox"),本人在这个字段上出过问题，谨记；

baseURL为服务器地址（根据需求修改）；

 var formData = new FormData();
 formData.append("file",$("#importFile")[0].files[0]);

上面这两行代码就是点击确定获取上传文件的内容，也很关键。

layer.open({
                type: 1,
                area: ['400px', '200px'],
                shadeClose: false,
                shade:0.6,
                // anim : 3,
                skin: 'layui-layer-molv',
                title:"导入数据",
                content:jQuery("#importBox"),
                btn: ['下载模板','确定', '关闭'],
                btn1: function(index){
                    window.location.href = baseURL+"org/orgmainfo/template?token="+localStorage.getItem("token");
                    layer.close(index);
                },
                btn2: function(index,layero){
                    var formData = new FormData();
                    formData.append("file",$("#importFile")[0].files[0]);
                    $.ajax({
                        url: baseURL+"org/orgmainfo/import?token="+localStorage.getItem("token"),
                        dataType: 'json',
                        type: 'POST',
                        data: formData,
                        cache: false,
                        processData: false,  // 不处理数据
                        contentType: false,
                        success: function(r){
                            console.log(r);
                            if(r.code == 0){
                                alert("导入成功！");
                                vm.reload();

                            }else{
                                alert(r.msg);
                            }
                        }
                    });
                    layer.close(index);
                },
                btn3: function(index){
                    layer.close(index);
                }
            });

4.后台controller我就不把代码贴出来了，后台根据自己的导入工具类自己写功能，基本不会出现大坑，主要的大坑就在我上面所列出的三点。

希望我的这些分享能带给大家帮助，谢谢~~~~