zoukankan      html  css  js  c++  java
  • react FileReader读取TXT文件并保存 split切割字符串 map()分别渲染切割后的数组内的所有字符串

    //class
    my_fileReader( e ) {
            console.log(e.target.files[0]);
            const reader = new FileReader();
            // 用readAsText读取TXT文件内容
            reader.readAsText(e.target.files[0]);
            reader.onload = function (e) {
                console.log(e.target.result);    //读取结果保存在字符串中
                let my_str = e.target.result;    //直接保存全部数据为一个字符串
                let my_arr = my_str.split(/[s ]/);   //按空格和换行符切割字符串,并保存在数组中
                this.setState({
                    previewPic: e.target.result,
                    arr : my_arr
                });
            }.bind(this);
        };
     
    //render 
    <input type="file" className="file" onChange={this.my_fileReader} />
    <div> {this.state.previewPic} </div>
    {arr  && arr.map((item, index )=>(
                            <div key = {`key${index}`} >
                                    {item}
                            </div>
                        )
     )}
  • 相关阅读:
    javascript:Storage 接口
    javascript:CORS 通信
    javascript:同源限制
    javascript:XMLHttpRequest 对象
    javascript:Cookie
    javascript:Navigator 对象,Screen 对象
    javascript:window 对象
    javascript:浏览器环境概述
    javascript:GlobalEventHandlers 接口
    javascript:其他常见事件
  • 原文地址:https://www.cnblogs.com/alchemist-z/p/12249362.html
Copyright © 2011-2022 走看看