FileReader()读取文件、图片上传预览-程序员宅基地

技术标签： python  java  vue  js  javascript  

687d7e08d16a541742e75c651c2e9ddd.png作者 | 不知名前端李小白

来源 | https://www.cnblogs.com/libo-web/p/15766987.html


前言

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个htmlCanvasElement上执行mozGetAsFile()方法后返回结果。

这里我就以 input 和 DataTransfer 两个方式来讲解 FileReader 对象的使用~~~

input:file



<input id="input" type="file">


输出：


    

  • input的file类型会渲染为一个按钮和一段文字。
    • 

  • 点击按钮可打开文件选择窗口，文字表示对文件的描述（大部分情况下为文件名）；
    • 

  • file类型的input会有files属性，保存着文件的相关信息。
    • 



点击按钮上传一个文件后，在控制台打印 input.files ，如下：


2cd425c15cfc5c756cb9a0fedbe390fb.png


 由上结果可知在 input 元素选择文件后返回了一个 FileList 对象：


    

  • lastModified 表示最近一次修改时间的毫秒值
    • 

  • lastModifiedDate 是一个字符串，表示上传文件的当前标准时间 (形同  Date() )
    • 

  • name 表示上传的文件名
    • 

  • size 表示文件的字节大小
    • 

  • type 表示文件类型
    • 

  • weblitRelativePath 当前为空，当在input上加上webkitdirectory属性时，可以直接选择目录下所有文件
    • 



这里演示一下weblitRelativePath：




<input id="input" type="file" webkitdirectory>


点击按钮会有一个弹窗提示：


289bc073068a3301620356a8fb2c5c18.png


点击上传就会上传我的“简历”文件夹下所有文件，这时我们再在控制台打印 input.files，得到如下结果：


d6d95fb683dc04888e719921b2777092.png


可以看出weblitRelativePath表示文件夹中文件的相对路径。


FileReader


虽然通过 input:file 的方式可以上传文件，但只能拿到文件的描述信息，并眉头获得文件中的数据，这时就需要  FileReader 出场了。


 FileReader（） 返回一个新构造的FileReader。




let fr = new FileReader()
console.log(fr);


控制带打印输出如下：


9e23e97bc3c02f55d5665e2759e44169.png


 可以看到 FileReader 对象的原型链上存在许多属性、方法以及对应事件回调。


属性


    

  • FileReader.error (只读)：表示在读取文件时发生的错误 
    • 

  • FileReader.readyState (只读)：表示FileReader状态的数字。取值如下：
    • 







常量名
值
描述




EMPTY
0
还没有加载任何数据




LOADING
1
数据正在被加载




DONE
2
已完成全部的读取请求






FileReader.result (只读)：文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。


方法


    

  •  FileReader.abort() 终止文件读取操作。在返回时，readyState属性为DONE
    • 

  •  FileReader.readAsArrayBuffer(file) 按字节读取文件内容，结果用ArrayBuffer对象表示
    • 

  • FileReader.readAsBinaryString(file) 按字节读取文件内容，结果为文件的二进制串
    • 

  •  FileReader.readAsDataURL() 读取文件内容，结果用data:url的字符串形式表示
    • 

  •  FileReader.readAsText() 按字符读取文件内容，结果用字符串形式表示
    • 



其中FileReader.readAsDataURL(file)和FileReader.readAsText(file,encoding)较为常用。


事件


    

  • FileReader.onabort 当读取操作被中止时调用
    • 

  • FileReader.onerror 当读取操作发生错误时调用
    • 

  • FileReader.onload  当读取操作成功完成时调用
    • 

  •  FileReader.onloadstart 当读取操作开始时调用
    • 

  •  FileReader.onloadend 当读取操作完成时调用，无论成功或失败
    • 

  •  FileReader.onprogress 在读取数据过程中周期性调用
    • 



以上列出 FileReader 这些属性、方法以及对应事件，想要具体了解可以查看MDN文档详解。


demo


下面直接上手实际例子：


读取txt文件内容：




<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FileReader</title>
</head>
<body>
  <input id="input" type="file">
  <script>
    // 获取元素
    const input = document.querySelector('input[type=file]')
    // 监听事件
    input.addEventListener('change', ()=>{
        // 创建FileReader实例对象
        const reader = new FileReader()
        // 调用readAsText()方法
        reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件
        // onload：当读取操作成功完成时调用
        reader.onload = ()=>{
            document.body.innerHTML += reader.result  // reader.result为获取结果
        }
    }, false)
</script>
</body>
</html>


图片上传预览




<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FileReader</title>
</head>
<body>
    <input id="input" type="file">
    <script>
        const input = document.querySelector('input[type=file]')
        input.addEventListener('change', ()=>{
            console.log( input.files ) //上传文件FileList对象
            const reader = new FileReader()
            //readAsDataURL()方法：读取文件内容，结果用data:url的字符串形式表示
            reader.readAsDataURL(input.files[0]) // input.files[0]为第一个文件
            // 读取成功回调
            reader.onload = ()=>{
                // 创建img节点
                const img = new Image()
                // 将读取的文件内容结果用data:url的字符串形式表示来赋值给img的src属性
                img.src = reader.result// reader.result为获取结果
                // 追加节点
                document.body.appendChild(img)  
            }
        }, false)
</script>
</body>
</html>


本文完~




学习更多技能


请点击下方公众号


ac69a25a690a542e87656d2456a09c60.gif


40f97a2a9ce2ed41686d0378dff01bac.png


b0b40bac234fc33dfa26fa5073e1e75d.png











   
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。



本文链接：https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/122465316

















智能推荐











React学习记录-程序员宅基地







文章浏览阅读936次，点赞22次，收藏26次。React核心基础















Linux查磁盘大小命令,linux系统查看磁盘空间的命令是什么-程序员宅基地







文章浏览阅读2k次。linux系统查看磁盘空间的命令是【df -hl】，该命令可以查看磁盘剩余空间大小。如果要查看每个根路径的分区大小，可以使用【df -h】命令。df命令以磁盘分区为单位查看文件系统。本文操作环境：red hat enterprise linux 6.1系统、thinkpad t480电脑。(学习视频分享：linux视频教程)Linux 查看磁盘空间可以使用 df 和 du 命令。df命令df 以磁..._df -hl















Office & delphi_range[char(96 + acolumn) + inttostr(65536)].end[xl-程序员宅基地







文章浏览阅读923次。uses ComObj;var ExcelApp: OleVariant;implementationprocedure TForm1.Button1Click(Sender: TObject);const // SheetType xlChart = -4109; xlWorksheet = -4167; // WBATemplate xlWBATWorksheet = -4167_range[char(96 + acolumn) + inttostr(65536)].end[xlup]















若依 quartz 定时任务中 service mapper无法注入解决办法_ruoyi-quartz无法引入ruoyi-admin的service-程序员宅基地







文章浏览阅读2.3k次。上图为任务代码，在任务具体执行的方法中使用，一定要写在方法内使用SpringContextUtil.getBean()方法实例化Spring service类下边是ruoyi-quartz模块中util/SpringContextUtil.java(已改写)import org.springframework.beans.BeansException;import org.springframework.context.ApplicationContext;import org.s..._ruoyi-quartz无法引入ruoyi-admin的service















CentOS7配置yum源-程序员宅基地







文章浏览阅读2w次，点赞10次，收藏77次。yum，全称“Yellow dog Updater, Modified”，是一个专门为了解决包的依赖关系而存在的软件包管理器。可以这么说，yum 是改进型的 RPM 软件管理器，它很好的解决了 RPM 所面临的软件包依赖问题。yum 在服务器端存有所有的 RPM 包，并将各个包之间的依赖关系记录在文件中，当管理员使用 yum 安装 RPM 包时，yum 会先从服务器端下载包的依赖性文件，通过分析此文件从服务器端一次性下载所有相关的 RPM 包并进行安装。_centos7配置yum源















智能科学毕设分享(算法) 基于深度学习的抽烟行为检测算法实现(源码分享)-程序员宅基地







文章浏览阅读828次，点赞21次，收藏8次。今天学长向大家分享一个毕业设计项目毕业设计 基于深度学习的抽烟行为检测算法实现(源码分享)毕业设计 深度学习的抽烟行为检测算法实现通过目前应用比较广泛的 Web 开发平台，将模型训练完成的算法模型部署，部署于 Web 平台。并且利用目前流行的前后端技术在该平台进行整合实现运营车辆驾驶员吸烟行为检测系统，方便用户使用。本系统是一种运营车辆驾驶员吸烟行为检测系统，为了降低误检率，对驾驶员视频中的吸烟烟雾和香烟目标分别进行检测，若同时检测到则判定该驾驶员存在吸烟行为。进行流程化处理，以满足用户的需要。












随便推点











STM32单片机示例：多个定时器同步触发启动_stm32 定时器同步-程序员宅基地







文章浏览阅读3.7k次，点赞3次，收藏14次。多个定时器同步触发启动是一种比较实用的功能，这里将对此做个示例说明。_stm32 定时器同步















android launcher分析和修改10,Android Launcher分析和修改9——Launcher启动APP流程（转载）...-程序员宅基地







文章浏览阅读348次。出处 : http://www.cnblogs.com/mythou/p/3187881.html本来想分析AppsCustomizePagedView类，不过今天突然接到一个临时任务。客户反馈说机器界面的图标很难点击启动程序，经常点击了没有反应，Boss说要优先解决这问题。没办法，只能看看是怎么回事。今天分析一下Launcher启动APP的过程。从用户点击到程序启动的流程，下面针对WorkSpa..._回调bubbletextview















Ubuntu 12 最快的两个源 个人感觉 163与cn99最快 ubuntu安装源下包过慢_un.12.cc-程序员宅基地







文章浏览阅读6.2k次。Ubuntu 12 最快的两个源 个人感觉 163与cn99最快 ubuntu下包过慢 1、首先备份Ubuntu 12.04源列表 sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup （备份下当前的源列表，有备无患嘛） 2、修改更新源 sudo gedit /etc/apt/sources.list （打开Ubuntu 12_un.12.cc















vue动态路由（权限设置）_vue动态路由权限-程序员宅基地







文章浏览阅读5.8k次，点赞6次，收藏86次。1.思路（1）动态添加路由肯定用的是addRouter，在哪用？（2）vuex当中获取到菜单，怎样展示到界面2.不管其他先试一下addRouter找到router/index.js文件，内容如下，这是我自己先配置的登录路由现在先不管请求到的菜单是什么样，先写一个固定的菜单通过addRouter添加添加以前注意：addRoutes()添加的是数组在export defult router的上一行图中17行写下以下代码var addRoute=[ { path:"/", name:"_vue动态路由权限















JSTL 之变量赋值标签-程序员宅基地







文章浏览阅读8.9k次。 关键词： JSTL 之变量赋值标签 /* * Author Yachun Miao * Created 11-Dec-06 */关于JSP核心库的set标签赋值变量，有两种方式: 1.日期" />2. 有种需求要把ApplicationResources_zh_CN.prope















VGA带音频转HDMI转换芯片|VGA转HDMI 转换器方案|VGA转HDMI1.4转换器芯片介绍_vga转hdmi带音频转换器,转接头拆解-程序员宅基地







文章浏览阅读3.1k次，点赞3次，收藏2次。1.1ZY5621概述ZY5621是VGA音频到HDMI转换器芯片，它符合HDMI1.4 DV1.0规范。ZY5621也是一款先进的高速转换器，集成了MCU和VGA EDID芯片。它还包含VGA输入指示和仅音频到HDMI功能。进一步降低系统制造成本，简化系统板上的布线。ZY5621方案设计简单，且可以完美还原输入端口的信号，此方案设计广泛应用于投影仪、教育多媒体、视频会议、视频展台、工业级主板显示、手持便携设备、转换盒、转换线材等产品设计上面。1.2 ZY5621 特性内置MCU嵌入式VGA_vga转hdmi带音频转换器,转接头拆解





















推荐文章


















热门文章


















相关标签