JavaScript File API文件上传预览


Posted in Javascript onFebruary 02, 2016

对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件。实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。再获取服务器返回的地址,然后做预览。

但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览。在网络比较慢的情况下,这样真的很折腾。

所以我们某些时候需要先预览再上传到服务器,特别是一些有剪切功能的需求,例如新浪微博的头像更换。但是目前能做的只能是借助插件开发或者使用flash,由于不同浏览器的技术实现不尽相同,为了让程序能够支持多浏览器,我们的程序就会变得十分复杂而难于维护。幸好现在有了File API

通过监听change事件我们可得知用户选择的文件,并且添加了一个files集合,集合中将包含file对象,每个file对象对应着一个文件。并且都有以下只读属性name,size,type,lastModifiedDate.

<input type="file" name="file">为例,监控onchange事打印它的file对象:

JavaScript File API文件上传预览

由此我们可得知用户选取的文件格式,文件名以及文件大小等等的一些信息。因此我们很容易就能为所选取的文件作验证判断是否符合我们定的一些要求。

除此之外File API还提供了FileReader类型读取文件中的数据。

FileReader类型实现的事一种异步文件读取机制,类似于XMLHttpRequest,但是它读的是文件系统而不是远程服务器。并且提供了几种读取方法:

  • readAsText(file,encoding):以纯文本形式读取文件,将读取到的文本保存在result属性中,第二个参数用于指定编码类型,可选。
  • readAsDataURL(file):读取文件以数据URL的形式保存在result属性中。
  • readAsBinaryString(file):读取文件并将一个字符串保存在result属性中。
  • readAsArrayBuffer(file):读取文件并将一个包含文件人容的ArrayBuffer保存在result属性中

通过以上方法分别读取同一张本地图片,并且把保存在result属性中的信息打印出来对比如下:

readAsText(file,encoding):

JavaScript File API文件上传预览

readAsDataURL(file):

JavaScript File API文件上传预览

通过以上对比我们发现这些读取文件的方法为灵活的处理文件数据提供了极大的方便。例如读取图像文件并且保存为数据url,可以做上传前的预览功能。

由于读取的过程是异步的,所以FileReader里面有几个事件分别处理不同的情况:progress(是否读取了新数据)、erro(是否发生了错误)、load(是否已经读完了整个文件)。

由于种种原因无法读取文件就会触发error事件,触发error事件的时会有一个属性code(错误码)保存在FileReader的error属性里面的一个对象中。

使用FileReader做上传预览的例子:

HTML:

<label class="item_label">上传照片:
 <span style="width: 100px; height: 100px;border:1px solid #ccc; display:inline-block"><img src="#" id="uploadPreview" style="width: 100%; height: 100%;"></span>
 <input type="file" name="file" id="postFile" style="width:74px;">
 <span id="error_text" style="display: none;">提示</span>
</label>

JavaScript:

document.getElementById('postFile').onchange = function() {
 var val = this.value;
 var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上传的格式
 var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //从字符串中抽出最后一次出现.之后的字符,并且转换成小写
 var result = upLoadType.indexOf(fileExt); //查找后缀名是否符合条件,如果符合返回>=0,如果不符合则返回负数;
 _alertMsg = $('#error_text');
 var oFReader = new FileReader();
 if (this.files.length === 0) { return; }
 var oFile = this.files[0]; //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.
  
 if (oFile.size / 1024 < 100) {
  _alertMsg.html("<font style='color:blue'>√</font>").show()
 };
 if (result < 0) {
  _alertMsg.html("请输入正确格式:" + upLoadType).show();
 } else{
  _alertMsg.html("<font style='color:blue'>√</font>").show();
 };
 
 oFReader.readAsDataURL(oFile); // 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
 oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
  document.getElementById("uploadPreview").src = oFREvent.target.result;
 };
};

效果以及返回的图片URL:

JavaScript File API文件上传预览

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

Javascript 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 #Javascript
Webwork 实现文件上传下载代码详解
Feb 02 #Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 #Javascript
原生js实现图片层叠轮播切换效果
Feb 02 #Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 #Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 #Javascript
javascript实现瀑布流加载图片原理
Feb 02 #Javascript
You might like
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
js封装tab标签页实例分享
2016/12/19 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Python语法分析之字符串格式化
2019/06/13 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
Java程序员综合测试题
2014/04/25 面试题
决心书标准格式
2014/03/11 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
授权委托书协议书
2014/10/16 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
Jsonp劫持学习
2021/04/01 PHP
尝试使用Python爬取城市租房信息
2022/04/12 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers