HTML5 之 FileReader 方法上传并读取文件
原文地址:https://caochangkui.github.io/file-upload/
HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
FileReader 事件
FileReader.onabort
处理abort事件。该事件在读取操作被中断时触发。FileReader.onerror
处理error事件。该事件在读取操作发生错误时触发。FileReader.onload
处理load事件。该事件在读取操作完成时触发。FileReader.onloadstart
处理loadstart事件。该事件在读取操作开始时触发。FileReader.onloadend
处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。FileReader.onprogress
处理progress事件。该事件在读取Blob时触发。
用法
下面分别是上传csv文件和图片文件的两种用法:
html部分
<div style="border: 1px solid red;">
<h2>上传CSV文件</h2>
<input type="file" id="file" accept=".csv" onchange="uploadfile();" />
<div id="result"> </div>
</div>
<br>
<br>
<div style="border: 1px solid red;">
<h2>上传图片</h2>
<input type="file" id="file2" accept="image/*" onchange="uploadfile2();" />
<div id="result2">
<img src="" alt="" id="img">
</div>
</div>
js部分
<script>
// 上传csv格式的文件
function uploadfile() {
let reads = new FileReader();
file = document.getElementById('file').files[0];
reads.readAsText(file, 'utf-8');
console.log(reads);
reads.onload = function (e) {
console.log(e)
// document.getElementById('result').innerText = this.result
document.getElementById('result').innerText = e.target.result
};
reads.onloadstart = function(e) {
console.log('onloadstart ---> ', e)
}
reads.onloadend = function(e) {
console.log('onloadend ---> ', e)
}
reads.onprogress = function(e) {
console.log('onprogress ---> ', e)
}
}
// 上传image
function uploadfile2() {
let reads = new FileReader();
file = document.getElementById('file2').files[0];
reads.readAsDataURL(file);
console.log(reads);
reads.onload = function (e) {
document.getElementById('img').src = this.result;
};
}
</script>
HTML5 之 FileReader 方法上传并读取文件的更多相关文章
- php+html5实现无刷新上传,大文件分片上传,断点续传
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- 深入研究HTML5实现图片压缩上传
上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢 ...
- HTML5裁剪图片并上传至服务器实现原理讲解
HTML5裁剪图片并上传至服务器实现原理讲解 经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...
- 基于html5的多图片上传,预览
基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...
- [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
- Nodejs express、html5实现拖拽上传
一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...
- HTML5文件上传器,纯脚本无插件的客户端文件上传器---Uploader 文件上传器类
概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...
- 导出HTML5 Canvas图片并上传服务器功能
这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...
- ci框架读取上传的excel文件数据
原文链接: https://blog.csdn.net/qq_38148394/article/details/87921373 此功能实现使用到PHPExcel类库,PHPExcel是一个PHP类库 ...
随机推荐
- 闲聊jQuery(一)
Write less, do more. 这便是jQuery的宗旨!jQuery,一个高效.精简并且功能丰富的 JavaScript 工具库. 想必,对于每一个前端开发者,一定用过jQuery吧!俗话 ...
- Java语法基础(四)----循环结构语句
一.循环结构: 循环语句可以在满足循环条件的情况下,反复执行某一段代码,这段被重复执行的代码被称为循环体语句,当反复执行这个循环体时,需要在合适的时候把循环判断条件修改为false,从而结束循环,否则 ...
- EF使用笔记
最近写接口导数据到大数据中心,但是实体数据字段非常多,如果手动去建数据库表和写插入语句效率非常低,所以想都试一试EF,效率之高,简直吓人,所以此文详细记录操作过程以备下次使用时之用.仅需六部就可完成建 ...
- 028、HTML 标签1列表、图片、表格
内容简单看一下理解就行了. HTML 是用来描述网页的一种语言.就是用来编写网页的语言 内容:换行.分割,标签属性,编码方式设置,字体标签,特殊符号,列表.图片.表格标签############### ...
- Invalid action class configuration that references an unknown class named [XX] .
多次遇到这个错误,难以解决,有时候出现,有时候没有,很神奇,今天发现了一点端倪,虽然说不上找到了所有导致这个bug的原因.至少,也是很主要的一种了. 其实,透过结果,如果debug用心,一行代码一行代 ...
- 4、JUC--CountDownLatch闭锁
CountDownLatch Java 5.0 在 java.util.concurrent 包中提供了多种并发容器类来改进同步容器的性能. CountDownLatch 一个同步辅助类,在完 ...
- (mac系统下)mysql 入门
1.安装好mysql之后并且服务启动,系统偏好设置里有启动mysql服务的按钮 看到running表示可用 2.通过终端访问mysql 先到mysql的路径下(默认安装没有配置环境变量):cd /us ...
- DataGuard之Apply Services(redo应用和SQL应用)
应用服务 Apply Services 根据oracle官方文档整理 http://docs.oracle.com/cd/E11882_01/server.112/e25608/log_apply.h ...
- QT 用listveiw显示图片
很多的时候需要浏览图片,一般会使用listview 显示图片,接下来我用listview显示图片 代码如下: QStandardItem * s1; QStandardItem * s2; QStan ...
- Android 截取屏幕图片并保存
Android市场上有很多屏幕截图软件,把当前屏幕截取出来并保存,这一节我们就来看看屏幕截图的具体实现. 操作步骤: 1.创建一片屏幕大小的缓冲区,用于存放屏幕大小的图片 Bitmap bitmap ...