已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮、下载文件到本地。

有两个方法:window.open()和通过form表单来提交。

在线例子:https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html

方法一:window.open("下载文件的后端接口");

*html结构*

<button type="button" id="btn1">下载一个zip(方法1)</button>
<button type="button" id="btn2">下载一个zip(方法2)</button>

/*js部分*/

var $eleBtn1 = $("#btn1");
        var $eleBtn2 = $("#btn2");

        //已知一个下载文件的后端接口:https://codeload.github.com/douban/douban-client/legacy.zip/master
        //方法一:window.open()
        $eleBtn1.click(function(){
            window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master");
        });

然而有个问题:浏览器会打开一个新窗口,然后迅速自动关闭,体验非常不好。

方法二:通过form提交

由于ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以通过ajax去请求该接口是无法下载文件的,所以我们创建一个新的form元素来请求接口。

/*js部分*/

//方法二:通过form
        $eleBtn2.click(function(){
            var $eleForm = $("<form method='get'></form>");

            $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");

            $(document.body).append($eleForm);

            //提交表单,实现下载
            $eleForm.submit();
        });

一般来说,可以通过 HTTP POST 请求文件传输到后端。在请求中需要指定文件类型和文件内容。具体实现步骤如下: 1. 创建一个表单,添加一个 input 元素用于选择文件,以及一个 submit 按钮用于提交表单。 ```html <form method="post" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit">上传文件</button> </form> ``` 2. 当用户点击提交按钮时,浏览器会将表单中的数据封装成一个 HTTP POST 请求,并将请求发送到后端。 3. 后端收到请求后,从请求体中获取文件内容,并将其保存到指定的本地路径中。 下面是一个使用Node.js实现文件上传的示例代码: ```javascript const http = require('http'); const formidable = require('formidable'); const fs = require('fs'); http.createServer(function(req, res) { if (req.url == '/upload' && req.method.toLowerCase() == 'post') { // 创建表单解析器 const form = new formidable.IncomingForm(); // 设置上传目录 form.uploadDir = './uploads'; // 解析表单数据 form.parse(req, function(err, fields, files) { // 获取上传的文件 const file = files.file; // 将文件从临时目录移动到上传目录 fs.rename(file.path, form.uploadDir + '/' + file.name, function(err) { if (err) throw err; res.writeHead(200, {'Content-Type': 'text/plain'}); res.write('文件上传成功!'); res.end(); }); }); } else { res.writeHead(200, {'Content-Type': 'text/html'}); res.write('<form method="post" enctype="multipart/form-data">'); res.write('<input type="file" name="file"><br>'); res.write('<button type="submit">上传文件</button>'); res.write('</form>'); res.end(); } }).listen(8080); ``` 这个示例实现一个简单的 HTTP 服务器,当用户访问根路径时,服务器会返回一个包含文件上传表单的页面。当用户选择文件并点击提交按钮时,浏览器会将文件上传到服务器,并将文件保存到指定的本地路径中。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值