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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php cli 小技巧
2013/06/03 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
php实现的顺序线性表示例
2019/05/04 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
深入Python函数编程的一些特性
2015/04/13 Python
python 爬取微信文章
2016/01/30 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
python实现文件的备份流程详解
2019/06/18 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
详解Python是如何实现issubclass的
2019/07/24 Python
环保建议书300字
2014/05/14 职场文书
路政管理求职信
2014/06/18 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
领导欢迎词范文
2015/01/26 职场文书
行为规范主题班会
2015/08/13 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript