layui 前端下载文件方法

//文件下载
function downLoadFile(ids, name) {
    //获取token
    var tableName = layui.data(setter.tableName);
    //创建下载请求
    var oReq = new XMLHttpRequest();
    //url参数为拿后台数据的接口
    oReq.open("POST", api.COMMON.FILE_MANAGE.FILE_LIST_DOWNLOAD, true);
    oReq.responseType = "blob";
    oReq.onload = function (oEvent) {
        var content = oReq.response;
        var elink = document.createElement('a');
        //name为后台返给前端的文件名,后缀名必须加,后台有返回后缀就不用管,不然下载在本地不好打开。
        elink.download = name + ".xlsx";
        elink.style.display = 'none';
        var blob = new Blob([content], {type: "application/x-www-form-urlencoded"});
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
    };
    oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //请求头里放入用户口令,必须在.open()和.send()之间设置
    oReq.setRequestHeader('Blade-Auth', tableName['Blade-Auth']);
    oReq.send("ids=" + ids);
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用 layui 实现前端上传文件的示例代码: HTML 代码: ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="uploadBtn">选择文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr> <th>文件名</th> <th>大小</th> <th>操作</th> </tr> </thead> <tbody id="fileList"></tbody> </table> </div> <button type="button" class="layui-btn" id="uploadFile">上传文件</button> </div> ``` JavaScript 代码: ```javascript layui.use('upload', function() { var upload = layui.upload; var fileList = []; // 选择文件按钮点击事件 $('#uploadBtn').on('click', function() { upload.render({ elem: '#uploadBtn', url: '/upload/', accept: 'file', multiple: true, done: function(res) { if (res.code === 0) { var file = { name: res.data.name, size: res.data.size }; fileList.push(file); renderFileList(); } else { layer.msg('上传文件失败'); } }, error: function() { layer.msg('上传文件失败'); } }); }); // 渲染文件列表 function renderFileList() { var html = ''; fileList.forEach(function(file, index) { html += '<tr>'; html += '<td>' + file.name + '</td>'; html += '<td>' + (file.size / 1024).toFixed(2) + 'KB</td>'; html += '<td><button type="button" class="layui-btn layui-btn-xs layui-btn-danger" data-index="' + index + '">删除</button></td>'; html += '</tr>'; }); $('#fileList').html(html); } // 删除文件按钮点击事件 $('#fileList').on('click', '.layui-btn-danger', function() { var index = $(this).data('index'); fileList.splice(index, 1); renderFileList(); }); // 上传文件按钮点击事件 $('#uploadFile').on('click', function() { if (fileList.length === 0) { layer.msg('请选择要上传的文件'); return; } var formData = new FormData(); fileList.forEach(function(file) { formData.append('file', file); }); $.ajax({ url: '/upload/', type: 'POST', data: formData, processData: false, contentType: false, success: function(res) { if (res.code === 0) { layer.msg('上传文件成功'); fileList = []; renderFileList(); } else { layer.msg('上传文件失败'); } }, error: function() { layer.msg('上传文件失败'); } }); }); }); ``` 注意,上面的示例代码需要使用 jQuery 库,同时需要在引入 layui 库之后才能使用。在示例代码中,`/upload/` 是文件上传的接口地址,需要根据实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值