JS/前端/H5:实现txt文件上传并读取其中内容

环境:React  16.8.6

浏览器:Chrome

业务背景:使用文件批量导入数据,如:批量导入IMEI号,在前端显示

第一步:首先你得通过input标签来导入文件,这是浏览器唯一给的本地 IO 口,然后你会得到如下样子的blob文件

第二步

把上述文件用 FileReader 读取,读取是异步的

const reader = new FileReader()
let strArr = []

try {
  strArr = `${evt.target.result}`.split(‘,‘)
} catch (e) {
  message.error(‘File content error !‘)
}

if (strArr.length > 0) {
    const gList = strArr.map(t => {

        return {
          imei: t,
          type:1,  // 添加任何你想加的属性
        }
      })

      dispatch({
        type: ‘home/updateState‘,
        payload: {
          gList,
        },
      });
}

原文地址:https://www.cnblogs.com/ww01/p/12312613.html

时间: 2024-07-30 21:16:58

JS/前端/H5:实现txt文件上传并读取其中内容的相关文章

使用JS实现可断点续传的文件上传方案

刚开始学习前端开发就碰到文件上传问题,还要求可断点续传.查了很多资料,发现H5的file API刚好可以满足我们的需求,也遇到了一些问题,于是记录下来为有同样需求的朋友提供一些帮助. 一.首先,为了引入文件对象,我们需要在H5页面上放置一个file类型的输入标签. 1 <input type="file" id="file" onchange="fileInfo()"> 当我们选择文件之后显示文件相关信息: 1 function fi

Bootstrap fileinput.js,最好用的文件上传组件

本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" /> <script type="text/javascri

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

关于Java网络爬虫---模拟txt文件上传操作。

业务需求是这样的,公司400业务中客户使用的,400电话号码,可以添加多个目的码你可以理解为转接号码: 这些配置的目的码我们会在网关服务器上配置成白名单,既拥有某些权限.先提出的要求是先添加或者变动目的码要及时同步到网关. 场景: 1.我们的网关服务器接受的白名单(目的码)是已txt文件上传的,数据按照制定的格式保存在txt里面. 2.利用Java网络爬虫模拟txt文件上传.------2018-4-7现在不写了,代码在公司电脑上明天总结一下在写. 原文地址:https://www.cnblog

H5危险的文件上传对话框

文件对话框 文件上传对话框是一直以来就存在的网页控件. 到了 HTML5 时代,增加了更多的功能,例如支持文件多选.Chrome 甚至还支持「上传文件夹」这一私有特征: <input type="file" webkitdirectory /> 在给用户方便的同时,其安全隐患也逐渐出现.用户平时在下载时,理所当然的弹出的是保存对话框,因此常常不仔细看就做出了选择. 这极有可能被攻击者所利用.一些恶意网站在用户点击下载时,故意弹出一个上传对话框.只要用户一疏忽,就把选中的文件

Node.js入门教程——如何实现文件上传功能

作者:zhanhailiang 日期:2014-11-16 本文将介绍如何使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/nodejs-upload-image-demo]# npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to gu

js 实现 input type=&quot;file&quot; 文件上传示例代码

在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 代码如下: <!DOCTYPE html> <html x

Node.js新手教程——怎样实现文件上传功能

作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/nodejs-upload-image-demo]# npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to gu

JS WEB怎么实现大文件上传

众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹上传,要求:服务端保留层级结构,支持10w级别的文件夹上传. 大文件上传及断点续传,要求:支持50G级的单个文件上传和续传.续传要求:在刷新浏览器后能够续传上传,在重启浏览器后能够继续上传上(关闭浏览器后重新打开),在重启电脑后能够继续上传. 支持PC端全平台,Windows,Mac,Linux 浏