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文档) * @ ...
随机推荐
- 【QT 学习之路】事件
事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等:另一些事 ...
- CH0304 IncDec Sequence (差分)
题目链接: https://ac.nowcoder.com/acm/contest/999/B 思路:(见图中解释) AC代码: #include<bits/stdc++.h> using ...
- 【每日一题】41. 德玛西亚万岁 (状态压缩DP)
补题链接:Here 经典状压DP问题 坑点,注意多组输入... const int N = 16, mod = 100000000; int f[N][1 << N]; int a[N]; ...
- HHKB Programming Contest 2020 补题记录(D题投影,E题预处理节省时间)
补题链接:Here A - Keyboard 签到,S 为 Y 则输出大写 T,不然则原样输出 T int main() { ios_base::sync_with_stdio(false), cin ...
- 倾斜摄影技术构建图扑 WebGIS 智慧展馆
前言 智慧展馆通过"云大物移智链"等技术将"物"(展品.设备.环境等)进行互联,并感知"人"(工作人员.观众等)的行为.结合 GIS.BIM ...
- java进阶(5)--package与import
一.package 1.package的作用:为了方便程序的管理 2.package怎么使用:package+包名,只能出现在java代码的第一行 3.package命令规范:一般采用公司域名倒序方式 ...
- Spring boot 自定义kafkaTemplate的bean实例进行生产消息和发送消息
本文为博主原创,未经允许不得转载: 目录: 1. 自定义生产消息 kafkaTemplate 实例 2. 封装 kafka 发送消息的service 方法 3. 测试 kafka 发送消息ser ...
- Nacos源码 (1) 源码编译及idea环境
本文介绍从gitee下载nacos源码,在本地编译,并导入idea进行本地调试. 从gitee下载源码 由于github访问速度慢,所以我选择使用gitee的镜像仓库: git clone https ...
- [转帖]nginx 剖析 request_time和upstream_response_time的误区、区别
https://cloud.tencent.com/developer/article/1767981 首先,澄清一个误区 upstream_response_time必须在upstream配置时才能 ...
- [转帖]MobaXterm激活专业版
本文思路来自 https://github.com/flygon2018/MobaXterm-keygen 有python 环境 并且不看英文的可以继续往下 不然直接访问这个地址也行. 1.需要一 ...