【layui】文件上传&&文件导入

一、【文件上传】

<div class="layui-form-item">
   	<label class="layui-form-label" style="width: 50px;">上传</label>
    <div class="layui-input-block" style="margin-left: 80px;">
        <div class="layui-input-inline" style="width: 220px;">
            <input name="value" id="download" lay-verify="required" 
            placeholder="文件地址" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: auto;margin-right: 0;">
            <button type="button" class="layui-btn" id="annex_upload">
            <i class="layui-icon">&#xe67c;</i>上传文件</button>
            <a class="layui-btn layui-btn-primary" onclick="see_img();">查看/下载文件</a>
        </div>
    </div>
</div>

var loading=null;
// 上传文件
upload.render({
    elem: '#annex_upload'
    ,url: layui.setter.baseUrl+'admin/upload/upload'
    ,multiple: false
    ,accept:'file'
    ,done: function(res){
        layer.close(loading);
        if(res.code==1){
            $('#download').val(res.data);
        }else{
            layer.msg(res.msg);
        }
    },before:function(){
        loading = layer.load(0);
    },error:function(err){
        layer.close(loading);
        layer.msg('上传出错');
     }
 });
 // 查看/下载文件
 window.see_img=function(){
     var testURL = $('#download').val();
     if(!testURL){ layer.msg('文件地址不能为空！'); return }
     if(isImageURL(testURL)){
         layer.photos({
             photos: {
                 title: "查看",
                 data: [{ src: testURL }]
             },
             shade: 0.5,closeBtn: 1,anim: 5
         });
     } else{
         window.location.href = testURL;
     }
 };
 // 判断一个链接是否指向图片
 function isImageURL(url) {
     // 定义常见的图片文件扩展名
     const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.svg'];
     // 获取链接的最后一个部分（通常是文件名和扩展名）
     const urlParts = url.split('/');
     const fileName = urlParts[urlParts.length - 1];
     // 获取文件的扩展名
     const fileExtension = '.' + fileName.split('.').pop();
     // 检查扩展名是否在图片扩展名列表中
     return imageExtensions.includes(fileExtension.toLowerCase());
 }

二、【文件导入】table 表格数据

1、弹窗-数据导入

admin.popup({
   	title: "数据导入",
    area: admin.screen() < 2 ? ['95%', '90%'] : ["500px", "220px"],
    id: "LAY-popup-import",
    success: function (layero, index) {
        view(this.id).render('/member/add_import').done(function () {
            form.render(null, 'add_import'); // 弹窗的lay-filter值
            // 监听提交*****文件上传
            upload.render({
                elem: '#LAY_avatarUpload'
                , url: layui.setter.baseUrl + 'admin/member/member_import'
                , multiple: true
                , accept: 'file' //允许上传的文件类型
                , acceptMime: '.xlsx,.csv'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#ht_file').val(file.name);
                    });
                }
                , done: function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                            layer.close(index); //执行关闭
                            table.reload('list'); //重载表格
                        });
                        $('#ht_file').attr('type', 'text');
                    } else {
                        layer.msg(res.msg, { icon: 5, anim: 6, shade: 0.5, time: 1000 });
                    }
                }
            });
        });
    }
});

2、/member/add_import.html

<form class="layui-form" action="" lay-filter="add_import" style="padding: 0 20px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">上传文件</label>
        <div class="layui-input-block">
            <div class="">
                <button type="button" class="layui-btn" id="LAY_avatarUpload" style="background-color: #5fb878;">
                <i class="layui-icon">&#xe67c;</i>选择文件</button>
                <span style="height: 38px;line-height: 38px;color: #999;font-size: 13px;margin-left: 10px;">仅支持.csv或.xlsx格式</span>
            </div>
            <div class="" style="margin-top: 5px;">
                <input type="hidden" id="ht_file" placeholder="附件地址" disabled class="layui-input">
            </div>
        </div>
    </div>
    <a onclick="xs_export()" style="color: red;margin-left: 10%;text-decoration:underline;">请点击下载导入模板,按照模板格式导入</a>
</form>

<script>
layui.use(['admin','form','upload','layedit','view','setter','layer'], function(){
    var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,layedit = layui.layedit
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,upload = layui.upload
        ,router = layui.router();

    element.render();
    form.render(null, 'add_import');

    // 会员导入模板导出
    window.xs_export=()=>{
        window.location.href = layui.setter.baseUrl+'admin/member/member_download_template';
        // window.location.href = window.location.origin+'/meeting_member_unit_import.xlsx';
    }

});
</script>