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. MB21 预留

    1.MB21创建预留 1.1MB21前台操作 输入物料等信息,保存即可 1.2调用BAPI:BAPI_RESERVATION_CREATE1 "----------------------- ...

  2. UVA - 1594 :Ducci Sequence (set应用)

    给定n元组(a1,a2,...,an),ai均为整数,得到下一个序列为(|a1-a2|,|a2-a3|,...,|an-a1|),如此循环下去,必定会出现全零序列或重复序列. 现要求判断给定序列是全零 ...

  3. windows 系统关闭占用端口的应用

    开发中有时候开发工具把程序关闭了,但是后台并没有真正关闭程序,导致再次启动相同端口的程序时报端口已经被使用的错误,这时如何强制关闭已占用的端口 1.打开dos对话框 2.查找被占用的端口的进程号 ne ...

  4. 8 Englishi 词根

    测一测 physical obesity skinny sliny stout skeleton external appearance recede unprecededented feinge e ...

  5. 4 Englishi 词根

    11 -ism  N词后缀   ...主义: 流派: 特性 individualism captitalism modernism humanism 12 -ist N词后缀  人: ...家 art ...

  6. 【架构师视角系列】Apollo配置中心之Client端(二)

    原创文章,转载请标注.https://www.cnblogs.com/boycelee/p/17978027 目录 声明 配置中心系列文章 一.客户端架构 1.Config Service职责 (1) ...

  7. 如何使用ps抠图(两种扣图方法)

    PS抠图的方法有很多种,以下是其中两种常用的方法: 方法一:适用于背景颜色单一.较为简单的图片. 选中魔棒工具/魔术橡皮擦,点击背景,出现选区,点击Delete键删除. 点击快速选择工具,沿着所需图形 ...

  8. 一个WPF开发的打印对话框-PrintDialogX

    今天五月一号,大家玩的开心哦. 1. 介绍 今天介绍一个WPF开发的打印对话框开源项目-PrintDialogX,该开源项目由<WPF开源项目:AIStudio.Wpf.AClient>作 ...

  9. Keep English Level-02

    change -- n 零钱 climate change -- 气候变化 exchange -- 交换,兑换(金融) exchange rate -- 汇率 move -- 感动,改变,移动 (n) ...

  10. P1914 小书童——凯撒密码

    1.题目介绍 小书童--凯撒密码 题目背景 某蒟蒻迷上了 "小书童",有一天登陆时忘记密码了(他没绑定邮箱 or 手机),于是便把问题抛给了神犇你. 题目描述 蒟蒻虽然忘记密码,但 ...