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文档) * @ ...
随机推荐
- PS CJ34预算转借
一.CJ34,输入发出预算和接收预算的WBS 二.调用BAPI "-----------------------------------------@斌将军----------------- ...
- 2022 开源之夏 | Serverless Devs 陪你“变得更强”
Serverless 是近年来云计算领域热门话题,凭借极致弹性.按量付费.降本提效等众多优势受到很多人的追捧,各云厂商也在不断地布局 Serverless 领域.但是随着时间的发展,Serverles ...
- Element 动态表头渲染表格
element 中的table表头动态渲染 https://blog.csdn.net/heixiuheixiu666/article/details/104705024/ Element 动态表头渲 ...
- 编写Java代码时应该避免的6个坑
通常情况下,我们都希望我们的代码是高效和兼容的,但是实际情况下代码中常常含有一些隐藏的坑,只有等出现异常时我们才会去解决它.本文是一篇比较简短的文章,列出了开发人员在编写 Java 程序时常犯的错误, ...
- 你做的 9 件事表明你不是专业的 Python 开发人员
本文转载自国外论坛 medium,原文地址: https://medium.com/navan-tech/7-java-features-you-might-not-have-heard-of-ade ...
- C语言中的操作符:了解与实践
欢迎大家来到贝蒂大讲堂 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty's blog 1. 操作符的分类 操作符又叫运算符,它在C语言中起着非常大的作用,以下是 ...
- Redis服务端辅助的客户端缓存机制
一.背景和问题 二.Redis6 的解决方案及原理 2.1 服务端支持客户端缓存的两种模式 1. 默认模式 2. 广播模式 2.2 客户端实现的两种连接模式 1. 使用同一连接 2. 使用不同连接 3 ...
- STM32 芯片锁死解决方法
芯片锁死原因: 1.烧进去的工程对应器件与目标器件不一致: 2.烧进去的工程HSE_VALUE与目标板上晶振频率不一致: 3.... 解决方法: 1.工程设置 2.按住复位按键,或短接复位脚电容,点击 ...
- [js] - 为子节点增加鼠标移入和移出的样式
var cards = document.querySelectorAll(".card"); for (let index = 0; index < cards.lengt ...
- SpringMVC08——拦截器——2021-05-11
拦截器概述 SpringMVC的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并做相应的处理. 例如:进行权限验证.记录请求信息的日志.判断用户 ...