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 相关文章推荐
javascript学习(一)构建自己的JS库
Jan 02 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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 类型转换函数intval
2009/06/20 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
python操作 hbase 数据的方法
2016/12/18 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python处理PDF与CDF实例
2020/02/26 Python
会计专业自我鉴定范文
2013/12/29 职场文书
预备党员政审材料
2014/02/04 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
初中化学教学反思
2016/02/22 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
把77A收信机改造成收音机
2022/04/05 无线电
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS