FileReader读取文件(文本和图片)
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读取文件(文本和图片)的更多相关文章
- HTML5 文件域+FileReader 读取文件(一)
在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...
- H5 FileReader读取文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- FileReader读取文件里文乱码问题
有一个UTF-8编码的文本文件,用FileReader读取到一个字符串,然后转换字符集:str=newString(str.getBytes(),"UTF-8");结果大部分中文显 ...
- FileReader()读取文件、图片上传预览
前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...
- HTML5 文件域+FileReader 读取文件(二)
一.读取文本文件内容,指定字符编码 <div class="container"> <!--文本文件验证--> <input type="f ...
- HTML5 文件域+FileReader 读取文件并上传到服务器(三)
一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...
- FileReader读取文件详解
FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...
- FileReader读取文件
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
- angular调用WCF服务,读取文件夹下图片显示列表,下载另存为图片
读取文件夹下的文件 public string ReadImagesPaths() { string result = string.Empty; try { string path = System ...
- java_method_readFile读取文件文本txt
/** * @Title: TxtAndCsvUtils.java * @Package cn.com.qmhd.tools * @Description: TODO(读取txt和CSV文档) * @ ...
随机推荐
- DNS--安装&&配置文件
1 下载 #下载服务yum -y install bind#下载解析工具yum -y install bind-utils 2 配置文件 主配置文件 /etc/named.conf 区配置文件 /va ...
- 【辅助工具】Maven使用
Maven使用 错误排查 查看对应依赖在仓库中的路径,jar文件有没有下载成功,如果不成功直接把外部文件夹删除重新加载 导包错误 找到对应的路径,丛正常导入的同事直接复制过来. Maven启动项目 导 ...
- JSP 学习笔记 | 三、EL 表达式简述
前文:JSP 学习笔记 | 二.JSP 脚本 & 案例实现 & 缺点分析 前文:JSP 学习笔记 | 一.JSP 原理理解 概述 EL(全称Expression Language )表 ...
- 2021杭电多校第零场 & 2021湘潭全国邀请赛 补题记录
比赛链接:Here 本场题目重现于 2021湘潭全国邀请赛 A - A+B Problem (签到) 根据题意处理即可 int main() { cin.tie(nullptr)->sync_w ...
- 全国城市地级市区县sql
全国城市地级市区县sql CREATE TABLE `region` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar( ...
- vue tabBar导航栏设计实现3-进一步抽取tab-item
系列导航 一.vue tabBar导航栏设计实现1-初步设计 二.vue tabBar导航栏设计实现2-抽取tab-bar 三.vue tabBar导航栏设计实现3-进一步抽取tab-item 四.v ...
- Spring AOP原来是这样实现的
Spring AOP 技术实现原理 在Spring框架中,AOP(面向切面编程)是通过代理模式和反射机制来实现的.本文将详细介绍Spring AOP的技术实现原理,包括JDK动态代理和CGLIB代理的 ...
- python · SQL | MySQL 配置与 python 连接数据库
来存档一下搞 sql 的过程,方便以后查阅. 安装与配置 mysql server:https://blog.csdn.net/zhende_lan/article/details/129318514 ...
- linux 服务器运行jmeter 进行服务性能压测
本文为博主原创,转载请注明出处: 起初需要了解项目服务的性能和瓶颈,就想要用 jmeter 进行压测,刚开始都是启动本地的jmeter 压测服务器上项目服务的性能,发现服务器的 cpu 和内存等一直升 ...
- 针对docker中的mongo容器增加鉴权
1. 背景 业务方的服务器经安全检查,发现以docker容器启动的mongo未增加鉴权的漏洞,随优化之 2. 配置 mongo以docker compose方式启动,镜像的版本号为4.2.6,dock ...