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 相关文章推荐
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP四大安全策略
2014/03/12 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
个人承诺书格式
2014/06/03 职场文书
工作散漫检讨书
2014/09/16 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
民主生活会主持词
2015/07/01 职场文书
暑假打工感想
2015/08/07 职场文书
会计专业自荐信范文
2019/05/22 职场文书