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. <vue 组件 1、组件化基本使用>

    代码结构 组件就是将复杂的功能拆分成简单的块,拆分后的块可以被多处使用. 组件的使用分成三个步骤: 1.创建组件构造器     Vue.extend() 2.注册组件               Vu ...

  2. vue学习笔记 十八、父子组件相互传递参数

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...

  3. Tmux | 常用操作存档

    (因为自己实在是太好忘了,所以在博客存档方便查找) 参考资料:Tmux 使用教程 | 阮一峰的网络日志 tmux new -s <session-name> <Ctrl+B D> ...

  4. Cortex-M3 MCU的技术特点

    1.Cortex-M3 MCU的技术特点 MCU简单来说就是一个可编程的中央处理器(CPU)加上一些必要的外设.不管是中央处理器还是整个MCU都是复杂的时序数字电路,根据程序或者指令来完成特定的任务. ...

  5. [转帖]一文看懂Linux内核页缓存(Page Cache)

    https://kernel.0voice.com/forum.php?mod=viewthread&tid=629   玩转Linux内核 发布于 2022-8-9 22:19:08 阅读  ...

  6. [转帖]s3fs - 使用S3FS存储桶目录允许其他用户使用权限

    https://www.coder.work/article/6661505   我在使用S3FS时遇到问题.我正在使用 ubuntu@ip-x-x-x-x:~$ /usr/bin/s3fs --ve ...

  7. [转帖]kubernetes service 和 kube-proxy详解

    https://plantegg.github.io/2020/01/22/kubernetes%20service/ 性能情况.. service 模式 根据创建Service的type类型不同,可 ...

  8. [转帖]CygWin、MingW、MSYS之间的关系

    https://www.jianshu.com/p/09198f6e0a3c 前言 在跨平台开发或移植中,经常会听说Cygwin.MingW.MSYS,他们之间是什么关系?对于将要完成的任务,应该选择 ...

  9. Python学习之十三_pip的学习

    Python学习之十三_pip的学习 pip的含义 pip: pip is the package installer for Python. You can use pip to install p ...

  10. Python学习之十一_Windows获取硬件信息

    Python学习之十一_Windows获取硬件信息 简介 网上找了一些方法简单整理了下,可以快速获取部分信息 包含机器名称等. 以及序列号相关 部分学习来源: https://blog.51cto.c ...