1.读取文本

                let file = input_file.files[0]
let fr = new FileReader();
fr.readAsText(file,'gb2312'); //设置文本格式
fr.onload = function() {
document.body.innerHTML = this.result;
console.log(this.result);
}

2.读取图标做预览图片

                let fileSize = file.size / 1024;  //转换大小单位kb
let fileMix = file.slice(0,1000); //截取文件
let img = new Image(); //创建一个图片对象
let fileReader = new FileReader(); //创建一个FileReader
fileReader.readAsDataURL(file); // 读取文件
fileReader.onload = function() { // 异步加载 img.width = '300'
img.height = '500'
img.src = this.result;
img.border = '3px solid #ccc'
document.body.appendChild(img)
}

FileReader读取文件(文本和图片)的更多相关文章

  1. HTML5 文件域+FileReader 读取文件(一)

    在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...

  2. H5 FileReader读取文件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. FileReader读取文件里文乱码问题

    有一个UTF-8编码的文本文件,用FileReader读取到一个字符串,然后转换字符集:str=newString(str.getBytes(),"UTF-8");结果大部分中文显 ...

  4. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  5. HTML5 文件域+FileReader 读取文件(二)

    一.读取文本文件内容,指定字符编码 <div class="container"> <!--文本文件验证--> <input type="f ...

  6. HTML5 文件域+FileReader 读取文件并上传到服务器(三)

    一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...

  7. FileReader读取文件详解

    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...

  8. FileReader读取文件

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  9. angular调用WCF服务,读取文件夹下图片显示列表,下载另存为图片

    读取文件夹下的文件 public string ReadImagesPaths() { string result = string.Empty; try { string path = System ...

  10. java_method_readFile读取文件文本txt

    /** * @Title: TxtAndCsvUtils.java * @Package cn.com.qmhd.tools * @Description: TODO(读取txt和CSV文档) * @ ...

随机推荐

  1. Codeforce:1300B. Assigning to Classes (math)

    解题思路 题目说的意思是,给一个2n个数的数组,注意n为奇数,将这个数组平均分为2份,假设为c1和c2. c1和c2是奇数个元素的数组,比如数组[1,2,3],那么中位数就是2. 那么如何求得中位数差 ...

  2. L2-008 最长对称子串 (回文子串 / DP / Manacher算法)

    对给定的字符串,本题要求你输出最长对称子串的长度.例如,给定Is PAT&TAP symmetric?,最长对称子串为s PAT&TAP s,于是你应该输出11. 输入格式: 输入在一 ...

  3. KCD技术分享:以SBOM为基础的云原生应用安全治理

    随着越来越多的企业和组织将他们的应用迁移到云上,云原生技术的应用部署和管理正在变得更加灵活和高效,但也相应地引入了一些新的安全风险.2023年4月15日,由云原生计算基金会(CNCF)发起,全球各国当 ...

  4. 新零售标杆 SKG 全面拥抱 Serverless,敏捷交付

    副标题:SKG 渠道中台借助 SAE +大禹打造云原生 DevOPS,提效 60% 作者:陈列昂(SKG).昕辰.龙琛.黛忻 项目背景 未来穿戴健康科技股份有限公司(SKG)是一家专注为个人与家庭提供 ...

  5. C#单向链表的实现

    节点 public class ListNode { public ListNode(int NewValue) { Value = NewValue; } //前一个 public ListNode ...

  6. Pgsql之查询一段时间内的所有年月yyyy-mm

    前几天干活儿的时候,报表中有这么个需求,需要用pgsql查询两个日期间的所有年月,下面贴代码: 1 with recursive t(n) as ( 2 select date('2020-01-01 ...

  7. Linux-文件指令-cat-less-head-touch

  8. Shell-获取终端输入-read

  9. [转帖]History of Unicode Release and Publication Dates

    www.unicode.org For ease of reference, this page collects together information about the dates for v ...

  10. [转帖]使用 BR 命令行备份恢复

    TiDB试用 来源:TiDB  浏览 404 扫码 分享 2021-04-20 20:49:42 使用 BR 命令行进行备份恢复 BR 命令行描述 命令和子命令 常用选项 使用 BR 命令行备份集群数 ...