javascript HTML5文件上传FileReader API


Posted in Javascript onMarch 27, 2020

文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能。但过去WEB程序员都很清楚,用HTML表单上传文件是很麻烦的事情,特别是你想了解一下用户上传的文件的一些属性,必须等它上传完成后才能知道。

未知的东西上传到服务器上,有可能产生安全问题,也有可能体积太大,超过允许,浪费空间。现在好了,WEB技术在进步,HTML5带来了很多好东西。这个FileReader API就能让你在用户上传之前就能获取上传文件的一些基本属性。

HTML代码

这个FileReader API 的工作原理和 File API 一样,需要使用input[type="file"] 元素:

<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->
<div id="destination"></div>

在File API这篇文章里有详细的关于能读取到的文件的相关信息,比如地址,体积,尺寸大小,文件类型等等。

JavaScript

这个例子中我们用input表单域上传一张图片,当用户在自己的电脑里选中一张图片后,这个图片会被显示到页面上:

document.getElementById('upload-file').addEventListener('change', function() {
 var file;
 var destination = document.getElementById('destination');
 destination.innerHTML = '';

 // 循环用户多选的文件
 for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 file = this.files[x];
 if(file.type.indexOf('image') != -1) { // 非常简单的交验

 var reader = new FileReader();

 reader.onload = function(e) {
 var img = new Image();
 img.src = e.target.result; // 显示图片的地方

 destination.appendChild(img);
 };
 
 reader.readAsDataURL(file);
 }
 }
});

这个例子里,我们使用FileReader里的readAsDataURL方法将图片内容转换成base64编码的字符串,然后使用图片的data URI方式显示它。其它的FileReader读取方法还有readAsText, readAsArrayBuffer和readAsBinaryString等

有了这个FileReader API,我们就可以避免用户先将文件上传到服务器,在浏览器客户端我们就可以进行操作。这些在上传到服务器前的预处理是很有必要的。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
angular.element方法汇总
Jan 07 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
JavaScript中文件上传API详解
Apr 01 #Javascript
jquery表单验证插件formValidator使用方法
Apr 01 #Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 #Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 #Javascript
jQuery实现下拉加载功能实例代码
Apr 01 #Javascript
Extjs实现下拉菜单效果
Apr 01 #Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
js左侧三级菜单导航实例代码
2013/09/13 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python实时获取cmd的输出
2015/12/13 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python表示矩阵的方法分析
2017/05/26 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
详解python中的数据类型和控制流
2019/08/08 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
大学生志愿者感言
2014/01/15 职场文书
还款承诺书范文
2014/05/20 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
入党函调证明材料
2015/06/19 职场文书
2016新年晚会开场白
2015/12/03 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL