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. DNS--安装&&配置文件

    1 下载 #下载服务yum -y install bind#下载解析工具yum -y install bind-utils 2 配置文件 主配置文件 /etc/named.conf 区配置文件 /va ...

  2. 【辅助工具】Maven使用

    Maven使用 错误排查 查看对应依赖在仓库中的路径,jar文件有没有下载成功,如果不成功直接把外部文件夹删除重新加载 导包错误 找到对应的路径,丛正常导入的同事直接复制过来. Maven启动项目 导 ...

  3. JSP 学习笔记 | 三、EL 表达式简述

    前文:JSP 学习笔记 | 二.JSP 脚本 & 案例实现 & 缺点分析 前文:JSP 学习笔记 | 一.JSP 原理理解 概述 EL(全称Expression Language )表 ...

  4. 2021杭电多校第零场 & 2021湘潭全国邀请赛 补题记录

    比赛链接:Here 本场题目重现于 2021湘潭全国邀请赛 A - A+B Problem (签到) 根据题意处理即可 int main() { cin.tie(nullptr)->sync_w ...

  5. 全国城市地级市区县sql

    全国城市地级市区县sql CREATE TABLE `region` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar( ...

  6. vue tabBar导航栏设计实现3-进一步抽取tab-item

    系列导航 一.vue tabBar导航栏设计实现1-初步设计 二.vue tabBar导航栏设计实现2-抽取tab-bar 三.vue tabBar导航栏设计实现3-进一步抽取tab-item 四.v ...

  7. Spring AOP原来是这样实现的

    Spring AOP 技术实现原理 在Spring框架中,AOP(面向切面编程)是通过代理模式和反射机制来实现的.本文将详细介绍Spring AOP的技术实现原理,包括JDK动态代理和CGLIB代理的 ...

  8. python · SQL | MySQL 配置与 python 连接数据库

    来存档一下搞 sql 的过程,方便以后查阅. 安装与配置 mysql server:https://blog.csdn.net/zhende_lan/article/details/129318514 ...

  9. linux 服务器运行jmeter 进行服务性能压测

    本文为博主原创,转载请注明出处: 起初需要了解项目服务的性能和瓶颈,就想要用 jmeter 进行压测,刚开始都是启动本地的jmeter 压测服务器上项目服务的性能,发现服务器的 cpu 和内存等一直升 ...

  10. 针对docker中的mongo容器增加鉴权

    1. 背景 业务方的服务器经安全检查,发现以docker容器启动的mongo未增加鉴权的漏洞,随优化之 2. 配置 mongo以docker compose方式启动,镜像的版本号为4.2.6,dock ...