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. C# 32位程序申请大内存

    VS2015 项目-->属性-->生成事件 在"后期生成事件命令行"中输入: cd /d $(DevEnvDir) cd.. cd.. cd VC\bin editbi ...

  2. 【CJsonObject】C++ JSON 解析器使用教程

    能选封装的尽量不使用底层的 一.CJsonObject 简介 CJsonObject 是 Bwar 基于 cJSON 全新开发一个 C++ 版的 JSON 库. CJsonObject 的最大优势是轻 ...

  3. vivo 悟空活动中台 - 微组件状态管理(下)

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/1DzTYIExVbK0uE_Oc7IHYw作者:悟空中台研发团队 [悟空活动中台]系列往期精 ...

  4. vivo 云服务海量数据存储架构演进与实践

    一.写在开头 vivo 云服务提供给用户备份手机上的联系人.短信.便签.书签等数据的能力,底层存储采用 MySQL 数据库进行数据存储. 随着 vivo 云服务业务发展,云服务用户量增长迅速,存储在云 ...

  5. 【调试】kdump原理及其使用方法

    kdump机制 简介 Kdump是在系统崩溃.死锁或死机时用来转储内存运行参数的一个工具和服务,是一种新的crash dump捕获机制,用来捕获kernel crash(内核崩溃)的时候产生的cras ...

  6. mock使用

  7. vant-list实现下拉加载更多

    1 <template> 2 <div class="home-wrapper"> 3 <div class="swipe-box" ...

  8. 如何一键私有化部署 Laf ?

    太长不看:Laf 上架了 Sealos 的模板市场,通过 Laf 应用模板即可一键部署! Laf 是一个完全开源的项目,除了使用公有云之外,还有大量的用户选择私有化部署 Laf.然而,私有化部署通常伴 ...

  9. 帮助编写异步代码的ESLint规则

    调试 JavaScript 中的异步代码有时就像在雷区中穿梭.你不知道 console.log 会在何时何地打印出来,也不知道代码是如何执行的. 你很难正确构造异步代码,使其按照你的意图以正确的顺序执 ...

  10. js - 异步加载图片到 dom

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...