jq导出文件及模板下载

以你之姓@ 2022-09-10 14:10 136阅读 0赞

> DOM

<div class="importDiv">
       
        <input class="showInput" type="text" readonly="readonly" />
        <button id="viewFileBtn">浏览</button>
        
        <form id="uploadFormOne" enctype="multipart/form-data">
            <input type="file" name="file" id="viewFileInput" class="viewFile" multiple="multiple"
                style="display: none;" />
        </form>
        
        
        <div class="fileErrorTip" style="display: none;">文件格式错误提示语：文件格式不符合要求，请重新上传</div>
        
        <div class="tempFile">
            <span>模板下载</span>
            <span class="downloadTemp" style="color: #0085d0; cursor: pointer;">导入模板.xlsx</span>
        </div>
        <button class="importFileBtn">导入</button>
    </div>

> JS

// 点击浏览按钮
    $('#viewFileBtn').off('click').on('click', function () { 
        $('.viewFile').off('change').on('change', function () { 
            var filePath = $('.viewFile').val();
            var fileName = filePath.substring(filePath.lastIndexOf('\\') + 1);
            $('.showInput').val(fileName);
        })
        $('.viewFile').trigger('click');
    })
    // 导入模板下载
    $('.downloadTemp').off('click').on('click', function () { 
        // 参考本人之前的导出文章...
    })
    // 导入事件
    $('.importFileBtn').on('click', function () { 
        // 判断导入内容是否为空
        if (!$('.showInput').val()) { 
            // 导入的内容不能为空
            return;
        }
        // 判断导入文件格式 此处只判断了xlsx
        //fileName != "zip" && fileName != "rar" && fileName != "docx"&& fileName != "doc" && fileName != "xlsx" &&
        //fileName != "xls" && fileName != "png" && fileName != "pdf" && fileName != "jpg" && fileName != "jpeg"
        if ($('.showInput').val().split('.')[1] !== 'xlsx') { 
            // 导入的文件格式错误,展示错误提示语
            $('.fileErrorTip').show();
            return;
        }
    
        // 判断文件大小
        var fileSize = document.getElementById('viewFileInput').files[0].size;
        var size = fileSize / 1024;
        if (size > 10000) { 
            alert("附件大小不能大于10M");
            return false;
        } else { 
            //定义上传的文件
            var formData = new FormData(document.getElementById('uploadFormOne'));
            $.ajax({ 
                url: "ulr" + param,
                type: 'POST',
                cache: false, // Boolean 默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
                async: false, // Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
                data: formData, // String 发送到服务器的数据。将自动转换为请求字符串格式
                processData: false,
                contentType: false,
                contentType: 'application/json',
                data: JSON.stringify({ 
                    a: [{ 
                        b: 1,
                        a: 1
                    }]
                }),
                //dataType:'json', //String 预期服务器返回的数据类型
                //contentType必须要设置为false 如果data不想被转化为字符串，就将processData设置为false
            }).success(function (result) { 
                
            }).fail(function (result) { 
                
            });
        }
    
    })