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 相关文章推荐
js动态加载以及确定加载完成的代码
Jul 31 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
How to Auto Include a Javascript File
2007/02/02 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
django query模块
2019/04/20 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
python算的上脚本语言吗
2020/06/22 Python
python实现马丁策略的实例详解
2021/01/15 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
经典的班主任推荐信
2013/10/28 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
运动会通讯稿400字
2014/01/28 职场文书
人大调研汇报材料
2014/08/14 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
本溪水洞导游词
2015/02/11 职场文书
解除处分决定书
2015/06/25 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS