前端利用XMLHttpRequest读取本地文本文件

21 篇文章 0 订阅

问题

前端常见是通过input按钮上传读取文件信息,此时知道本地文件路径需要直接js读取本地文件内的信息

注意

本地测试,需要解决本地浏览器跨域问题,如:
浏览器跨域问题

可查看此链接解决:
解决本地浏览器运行项目是的跨域问题

解决

利用XMLHttpRequest获取到文件的信息。

/**
 * XMLHttpRequest.open() 初始化请求参数
 * XMLHttpRequest.send() 发送网络请求
 * XMLHttpRequest.onload() 监听请求结果
 * XMLHttpRequest.responseType 对响应结果进行声明,来对结果自动进行处理(text,json,blob,document)
 * XMLHttpRequest.onerror() 请求中断等错误发生时的处理
 * XMLHttpRequest.status 为HTTP状态码 如 404/422/403等,当为200时为正确响应
 * XMLHttpRequest.statusText HTTP状态码内容,200时为ok,404 为Not Found
 * XMLHttpRequest.response 服务器端响应的内容
 */
function readTextFile(filePath, callback) {
    const xhrFile = new XMLHttpRequest();
    xhrFile.open("GET", filePath, true);
    xhrFile.onload  = function() {
        const allText = xhrFile.response;
        callback(allText)
    }
    xhrFile.send();
}
const filePath = `E:/学习/JavaScript/txt.txt`
readTextFile(filePath, (textDetail) => {
    console.log(textDetail)
})

前端利用XMLHttpRequest读取本地文本文件

  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值