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分页控件 可用于无刷新分页
Jul 23 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 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 和 MySQL 基础教程(一)
2006/10/09 PHP
php正则表达式(regar expression)
2011/09/10 PHP
php中大括号作用介绍
2012/03/22 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
详解Python中的Cookie模块使用
2015/07/06 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python获取代码运行时间的实例代码
2018/06/11 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Python 高效编程技巧分享
2020/09/10 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
2014年国庆节演讲稿
2014/09/02 职场文书
挂职学习心得体会
2014/09/09 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript