ajax批量下载文件,动态构建一个Form 并且提交获取返回的文件流

本文介绍了一个使用Ajax和动态构建Form的方法来实现批量下载文件的功能。当用户在表格中选择多个文件后,会弹出确认对话框。如果用户确认下载,将通过Ajax提交数据到服务器进行文件打包,并在完成后触发文件流下载。同时,文章还展示了如何在确认下载后显示加载模态框并在文件打包完成后关闭。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//批量下载文件(打包)
function button_downloadplus(url) {
var rows = $('#exampleTableEvents').bootstrapTable('getSelections');    //返回所有选择的行,当没有选择的记录时,返回一个空数组
var $table = $("#exampleTableEvents"); 

//alert("进入reload");  
//return;  
if (rows.length == 0) {  
alert("请选择要下载的数据", "error");  
return;  
};
var title = "您确定要下载选定的"  + rows.length + "个文件及文件夹吗"
            swal({
                title: title,
                text: "此下载占用系统资源,请勿频繁操作!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的,我要下载!",
                cancelButtonText: "让我再考虑一下…",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {
post_url = url + "&time=" + new Date().getTime();  
var ids = '';  
//遍历所有选择的行数据,取每条数据对应的ID  
$.each(rows, function(i, row) {
var file_type = 2;
if(row['file_type']=='文件夹'){
file_type = 1;
}
ids = ids + '{"id":' + row['id'] + ',"file_type":' + file_type +'};';
});
console.log(ids);
if(ids!=''){
ids = ids.slice(0,ids.length-1);}
//定义ajax请求参数  
var param = {ids:ids}; 
console.log(param);
swal.close();
$("#loadingModal").modal('show');
$.dynamicSubmit(post_url,param);
$("#loadingModal").modal('hide');   //**********************分2步走,先服务器POST提交服务器打包文件,打包完成返回参数给客户端在下载打包后的值
} else {
swal("已取消", "您取消了删除操作!", "error")
}
            })
}

/*
 * 动态构建一个Form 并且提交
*/
$.dynamicSubmit = function (url, datas) {


    var form = $('#dynamicForm');


    if (form.length <= 0) {
        form = $("<form>");
        form.attr('id', 'dynamicForm');
        form.attr('style', 'display:none');
        form.attr('target', '');
        form.attr('method', 'post');


        $('body').append(form);
    }


    form = $('#dynamicForm');
    form.attr('action', url);
    form.empty();


    if (datas && typeof (datas) == 'object') {
        for (var item in datas) {
            var $_input = $('<input>');
            $_input.attr('type', 'hidden');
            $_input.attr('name', item);
            $_input.val(datas[item]);


            $_input.appendTo(form);
        }
    }


    form.submit();
}
<think>好的,我现在需要帮助用户了解如何使用XHR(XMLHttpRequest)来加载和读取文本文件。首先,我得回忆一下XHR的基本用法,以及如何处理文本文件。 用户的问题明确指向通过XHR获取文本内容,所以应该从创建XHR对象开始。记得XMLHttpRequest是浏览器提供的API,用于在后台与服务器交换数据。不过要注意同源策略,可能需要服务器配置CORS。 接下来,我需要考虑步骤:创建实例、设置请求方法和URL、定义回调函数、发送请求。然后,在回调中处理响应文本。同时,要处理可能的错误,比如网络问题或404错误。示例代码是必要的,用户可能需要一个可以直接参考的代码段。 另外,用户提供的引用中提到了旧版XHR的缺点,比如只支持文本传输,没有进度信息。虽然用户的问题是关于文本文件,但可能需要提到现代XHR支持二进制数据,但这里专注于文本即可。同时,可以提到使用addEventListener来监控进度,但用户的问题可能不需要这个细节。 需要注意同步和异步请求的区别,通常推荐异步处理以避免阻塞。示例中使用异步模式,设置onload和onerror事件处理程序。正确设置响应类型responseType为'text',但根据引用[2],旧版可能不支持,但现代浏览器应该没问题。 可能还需要提醒用户关于跨域问题,如果文件在另一个域,服务器需要设置正确的CORS头。此外,确保服务器正确配置MIME类型,比如.txt文件的Content-Type。 最后,生成相关问题,确保涵盖错误处理、跨域问题、进度监控以及与其他文件类型的比较,比如引用提到的Excel和PDF处理,但这里保持问题集中在文本文件上。</think>### 通过XHR获取文本文件内容的步骤及示例 #### 1. 创建XMLHttpRequest对象 首先需要实例化`XMLHttpRequest`对象,这是浏览器提供的用于发起HTTP请求的接口。 ```javascript const xhr = new XMLHttpRequest(); ``` #### 2. 配置请求参数 使用`open()`方法设置请求类型(GET/POST)和目标文件URL。例如加载同目录下的`example.txt`文件: ```javascript xhr.open('GET', 'example.txt', true); // 第三个参数true表示异步请求 ``` #### 3. 定义响应处理函数 通过`onload`事件监听请求完成状态,并通过`responseText`获取文件内容: ```javascript xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { // 状态码200-299表示成功 console.log('文件内容:', xhr.responseText); } else { console.error('请求失败,状态码:', xhr.status); } }; ``` #### 4. 处理网络错误 通过`onerror`事件捕获网络层级的异常: ```javascript xhr.onerror = function() { console.error('网络请求失败'); }; ``` #### 5. 发送请求 调用`send()`方法正式发起请求: ```javascript xhr.send(); ``` #### 完整示例 ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'example.txt', true); xhr.onload = function() { if (xhr.status === 200) { document.getElementById('content').innerText = xhr.responseText; } else { alert('文件加载失败: ' + xhr.status); } }; xhr.onerror = function() { alert('网络连接异常'); }; xhr.send(); ``` ### 注意事项 1. **跨域问题**:若文件位于不同域名下,需服务器设置`Access-Control-Allow-Origin`响应头[^2] 2. **同步请求**:非必要情况避免使用`open()`的第三个参数设为`false`,否则会阻塞页面渲染 3. **响应类型**:可通过`xhr.responseType = 'text'`显式指定数据类型(但文本文件默认已正确处理)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值