ashx获取input file 文件_前端战五渣学前端——FileReader预览本地文件
距离上一篇博客将近一个半月了,这一个多月有点烦躁,静不下心来学习,也不知道为什么,玩的也不算太好,还感冒。可能是天气热了吧,有点点躁动。上周看了《哪吒——魔童降世》还不错,还看了新出的《蜘蛛侠:英雄远征》,从彼得帕克身上看到了钢铁侠的影子,很是激动哦!
需求
为什么今天会想到写这个预览本地文件的博客呢,因为在工作中遇到了问题
- 需要上传图片
- 在图片上传之前,需要展示出来图片
- 之前的上传图片实现是图片上传成功以后返回url,然后根据url再展示图片
这就是目前需要实现的功能。要实现这个功能,我目前感觉必须要实现网页可以预览本地图片,因为图片在展示的时候根本还没有上传,并没有图片地址这一说
网上一搜,果然html5的强大体现出来的,有原生API就可以实现————FileReader。
FileReader方法
FileReader的实例拥有4个方法,其中3个是用来读取文件,另一个是用来中断读取(目前我没有用过这个方法 没有需求~)。我们需要注意的是不管读取成功或者失败,这几个方法都不会直接返回读取结果,而是在result
属性中(后面会提到)
abort
方法,参数none
,终端读取readAsBinaryString
方法,参数file
,将文件读取为二进制码readAsDataURL
方法,参数file
,将文件读取为DataURLreadAsText
方法,参数file, [encoding]
,将文件读取为文本
readAsText: 该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString: 该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。(下面没用到。。。尴尬。。)
readAsDataURL: 该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。(其实图片的话就是转成base64的格式)
FileReader事件
FileReader拥有提供了整个流程的事件模型,方便我们在读取文件的各个阶段来进行自己想执行的方法
onabort
,中断时触发onerror
,出错时触发onload
,文件读取成功完成时触发onloadend
,读取完成触发,无论成功或失败onloadstart
,读取开始时触发onprogress
,读取中
基本的流程就是呢~ onloadstart
>onprogress
>onload
>onloadend
我们来使用
readAsDataURL
那我们就直接来上代码吧⬇️
<input type="file" id="file">
<img src="" alt="" id="img">
我们现在需要的就是我们从<input type="file" id="file">
这个标签选择的图片在不经过请求上传就可以在下面的<img src="" alt="" id="img">
标签中展示出来
let reader = null; // 声明reader变量方便后面使用const fileNode = document.querySelector('#file'); // 获取input标签fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听,当选择文件以后触发if (window.FileReader) { // 判断浏览器中有没有FileReader,毕竟现在不是所有浏览器都有FileReaderreader = new FileReader(); // 实例化FileReaderreader.onload = (event) => { // 设置读取成功以后执行的方法document.querySelector('#img').src = event.target.result; // 前面说过,成功返回的数据再result属性中,然后将这个设置成img标签的src地址}} else { // 没有FileReader的弹出警告然后返回alert('你的先浏览器没有FileReader,不能这么干!');return;}const file = e.target.files[0]; // 拿到选择的文件信息reader.readAsDataURL(file); // 将文件信息转成DataUrl,这个就是转成功后执行 reader.onload 方法
})
本地图片预览https://www.zhihu.com/video/1139918571667898368
这样我们就实现了不通过上传图片就可以在本地浏览图片了!
至此,我们用到了readAsDataURL
方法和onload
事件,下面我们再来看一下readAsText
,也就是读取文本。
readAsText
还是,我们先更改html
<input type="file" id="file">
<div id="text"></div>
let reader = null; // 声明reader变量方便后面使用const fileNode = document.querySelector('#file'); // 获取input标签fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听,当选择文件以后触发if (window.FileReader) { // 判断浏览器中有没有FileReader,毕竟现在不是所有浏览器都有FileReaderreader = new FileReader(); // 实例化FileReaderreader.onload = (event) => { // 设置读取成功以后执行的方法document.querySelector('#text').innerHTML = event.target.result; // 前面说过,成功返回的数据再result属性中,然后将拿回来的文本添加到指定标签中}} else { // 没有FileReader的弹出警告然后返回alert('你的先浏览器没有FileReader,不能这么干!');return;}const file = e.target.files[0]; // 拿到选择的文件信息reader.readAsText(file); // 将文件信息转成文本,默认是UTF-8格式,这个就是转成功后执行 reader.onload 方法
})
新建一个txt的文件,别的文本文件应该也好使
预览本地文本https://www.zhihu.com/video/1139918696410636288
这样我们就实现了本地预览图片和文本的需求啦~
轻松一下
我们来课堂延伸一下,就是我们在获取图片的时候,其实是转成base64的格式,然后呈现在页面中的,那我们现在还有一个API可以让图片生成一个本地的地址,然后展现出来,那就是——URL.createObjectURL()
怎么用呢???让我们来看一下代码
这回我们的html有两个img标签,方便我们来对比
<input type="file" id="file">
<img src="" alt="" id="img">
<img src="" alt="" id="img2">
let reader = null; // 声明reader变量方便后面使用const fileNode = document.querySelector('#file'); // 获取input标签fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听,当选择文件以后触发if (window.FileReader) { // 判断浏览器中有没有FileReader,毕竟现在不是所有浏览器都有FileReaderreader = new FileReader(); // 实例化FileReaderreader.onload = (event) => { // 设置读取成功以后执行的方法document.querySelector('#img').src = event.target.result; // 前面说过,成功返回的数据再result属性中,然后将这个设置成img标签的src地址}} else { // 没有FileReader的弹出警告然后返回alert('你的先浏览器没有FileReader,不能这么干!');return;}const file = e.target.files[0]; // 拿到选择的文件信息/* 这里是我们用的URL.createObjectURL() */document.querySelector('#img2').src = URL.createObjectURL(file) // 我们直接通过URL.createObjectURL()这个方法来把文件信息转成一个url地址/* end */reader.readAsDataURL(file); // 将文件信息转成DataUrl,这个就是转成功后执行
})
预览本地图片urlhttps://www.zhihu.com/video/1139918810411933696
结语
现在我们可以实现本地预览图片、文本,以及可以生成url来预览的需求了。
往后我还会继续更新博客,记录自己在学习过成功遇到的小问题,或者学习到的新技能
我是前端战五渣,一个前端界的小学生。
ashx获取input file 文件_前端战五渣学前端——FileReader预览本地文件相关推荐
- 使用PDF.js实现前端和手机端网页预览PDF文件(可定制,支持本地文件、Base64编码和远程URL跨域方式)
1.插件下载地址:https://mozilla.github.io/pdf.js/ 下载后解压pdfjs-1.10.88-dist.zip文件后得到: 2.把pdfjs-1.10.88-dist放到 ...
- linux 预览md文件_利用Tornado搭建文档预览系统
在平时的工作或学习中,我们经常会接触不同格式的文档类型,比如txt,log,Offices文档,编程代码脚本,图片,视频等.本文将会介绍笔者的一个朴素想法,即把不同格式的文档都放在同一个平台中进行预览 ...
- ashx获取input file 文件_手机浏览器input type=file标签调用手机拍照+分片上传
闲话不多路能需还定有开都视这讲房哦搞有名需移洁页说,开发背景也不是大家关心的话题.就直接说实现如题功朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上能 首先,你的手机要支持html5吧( ...
- 前端战五渣学前端——跨域
跨域(Cross-Origin) 这几年的工作.面试中,还遇到一个不能回避的问题,那就是跨域,一般面试的时候会问你'怎么解决跨域问题','跨域是什么','为什么会有跨域'等类似的问题.前段时间后端大佬 ...
- Zan Proxy:解决前端跨域、服务端预览本地文件、
Zan Proxy 官网链接 https://youzan.github.io/zan-proxy/ Mac 需要 安装证书 https://youzan.github.io/zan-proxy/bo ...
- 前端在旧版浏览器预览PDF文件
目录 场景 使用方法 引入pdf.js 写法 鸣谢 场景 旧版浏览器无法支持PDF文件在线预览,虽然有adobe reader这个软件可以支持iframe在线预览,但让每个使用旧版浏览器的用户去安装这 ...
- mysql的indata文件_【数据分析】MySQL之不能导入本地文件“Loading local data is disable;”...
今天在使用"利用MySQL的命令行进行CSV文件的导入"时,遇到了这样一个问题: 提示本地文件无法导入,必须要"同时获得客户端和服务器端的许可". 很难受,于是 ...
- ashx获取input file 文件_通过Ajax方式上传文件(input file),使用FormData进行Ajax请求...
一直以来上传文件都使用的是别人的组件,今天看下无刷新上传内部具体的做法.上传文件可以使用form的形式来上传,也可以通过构造formData使用ajax来上传文件: 上传图片 $(function ( ...
- 通过将文件流放入response中实现在线预览pdf文件
public void getHealthReacordById(Long id, HttpServletResponse response) throws UnsupportedEncodingEx ...
最新文章
- 后端如何发出请求_gRPC系列(三) 如何借助HTTP2实现传输
- python输入函数格式_python如何提取.c文件中的指定函数的输入参数
- 启明云端分享|ESP32-C3有望三月中旬量产出货,ESP32-C3-MINI-1模块技术规格书分享
- 网络与IO知识扫盲(五):从 NIO 到多路复用器
- layer之弹层组件文档 layui.layer(v.1.9.0之后)
- 类Unix系统下,vim各种模式之间的切换
- “约见”面试官系列之常见面试题之第六十五篇之ajax如何解析jsonp(建议收藏)
- HttpComponents分析之连接池实现
- 2014年计算机求职总结--准备篇
- Django中URL和View的关系
- 《机器学习实战》笔记-介绍
- Windows和Mac OS的伽马值
- 虚幻4游戏开发_4_导入fbx和编辑
- 9.6 多元函数微分学的几何应用
- 关于同一局域网中,获取的IP非本地真实IP的问题。
- BLE-2の蓝牙4.0协议栈のLL层 Scaning 和 initiating状态的区别
- 9月28日科技资讯|华为发布全容器化 5G 核心网;余承东评小米 MIX Aphla 手机无实用价值;PHP 新版本更新
- Linux服务.NO7——samba
- 佛罗里达计算机科学,佛罗里达大学计算机科学专业居然这么吃香?
- 期末离散数学前三章关键知识点整理——应试。
热门文章
- DPDK | 如何在用户空间使用大页内存hugepage
- 代码里经常看见idle,是什么意思
- GitHub:Python 强化学习实用指南
- excel合并多个工作表_excel中汇总多个工作表数据的神器——合并计算
- skywalking 安装_分布式监控系统SkyWalking
- java https请求_Spring Cloud Sleuth:分布式请求链路跟踪
- wpf label字体为斜体_快来收下这份字体设计必备知识点
- python模拟内置函数all_Python内置all函数详细介绍
- 人脸识别撞脸名画_奇瑞全新电动SUV现身,“撞脸”保时捷,全铝车身,轴距2805mm...
- java堆算法_用Java写算法之七:堆排序