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文档) * @ ...
随机推荐
- <vue 组件 1、组件化基本使用>
代码结构 组件就是将复杂的功能拆分成简单的块,拆分后的块可以被多处使用. 组件的使用分成三个步骤: 1.创建组件构造器 Vue.extend() 2.注册组件 Vu ...
- vue学习笔记 十八、父子组件相互传递参数
系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...
- Tmux | 常用操作存档
(因为自己实在是太好忘了,所以在博客存档方便查找) 参考资料:Tmux 使用教程 | 阮一峰的网络日志 tmux new -s <session-name> <Ctrl+B D> ...
- Cortex-M3 MCU的技术特点
1.Cortex-M3 MCU的技术特点 MCU简单来说就是一个可编程的中央处理器(CPU)加上一些必要的外设.不管是中央处理器还是整个MCU都是复杂的时序数字电路,根据程序或者指令来完成特定的任务. ...
- [转帖]一文看懂Linux内核页缓存(Page Cache)
https://kernel.0voice.com/forum.php?mod=viewthread&tid=629 玩转Linux内核 发布于 2022-8-9 22:19:08 阅读 ...
- [转帖]s3fs - 使用S3FS存储桶目录允许其他用户使用权限
https://www.coder.work/article/6661505 我在使用S3FS时遇到问题.我正在使用 ubuntu@ip-x-x-x-x:~$ /usr/bin/s3fs --ve ...
- [转帖]kubernetes service 和 kube-proxy详解
https://plantegg.github.io/2020/01/22/kubernetes%20service/ 性能情况.. service 模式 根据创建Service的type类型不同,可 ...
- [转帖]CygWin、MingW、MSYS之间的关系
https://www.jianshu.com/p/09198f6e0a3c 前言 在跨平台开发或移植中,经常会听说Cygwin.MingW.MSYS,他们之间是什么关系?对于将要完成的任务,应该选择 ...
- Python学习之十三_pip的学习
Python学习之十三_pip的学习 pip的含义 pip: pip is the package installer for Python. You can use pip to install p ...
- Python学习之十一_Windows获取硬件信息
Python学习之十一_Windows获取硬件信息 简介 网上找了一些方法简单整理了下,可以快速获取部分信息 包含机器名称等. 以及序列号相关 部分学习来源: https://blog.51cto.c ...