js 上传文件预览的简单实例


Posted in Javascript onAugust 16, 2016

1. FILE API

html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件。

2. example

<html>
<body>
<div id="test-image-preview" 
style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </div>
<br/>
<div id="test-file-info"></div>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">

var
  fileInput = document.getElementById('test-image-file'),
  info = document.getElementById('test-file-info'),
  preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
  // 清除背景图片:
  preview.style.backgroundImage = '';
  // 检查文件是否选择:
  if (!fileInput.value) {
    info.innerHTML = '没有选择文件';
    return;
  }
  // 获取File引用:
  var file = fileInput.files[0];
  // 获取File信息:
  info.innerHTML = '文件: ' + file.name + '<br>' +
           '大小: ' + file.size + '<br>' +
           '修改: ' + file.lastModifiedDate;
  if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
    alert('不是有效的图片文件!');
    return;
  }
  // 读取文件:
  var reader = new FileReader();
  reader.onload = function(e) {
    var
      data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'      
    preview.style.backgroundImage = 'url(' + data + ')';
  };
  // 以DataURL的形式读取文件:
  reader.readAsDataURL(file);
});
</script>

</body>
</html>

以DataURL的形式读取到的文件是一个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,

常用于设置图像。如果需要服务器端处理,把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

3. 解释

上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中,浏览器的JavaScript执行引擎在执行JavaScript代码时,总是以单线程模式执行,也就是说,任何时候,JavaScript代码都不可能同时有多于1个线程在执行。

你可能会问,单线程模式执行的JavaScript,如何处理多任务?

在JavaScript中,执行多任务实际上都是异步调用,比如上面的代码:

reader.readAsDataURL(file);

就会发起一个异步操作来读取文件内容。因为是异步操作,所以我们在JavaScript代码中就不知道什么时候操作结束,因此需要先设置一个回调函数:

reader.onload = function(e) {
  // 当文件读取完成后,自动调用此函数:
};

当文件读取完成后,JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时,文件已经读取完毕,所以我们可以在回调函数内部安全地获得文件内容。

以上这篇js 上传文件预览的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
SWFObject Flash js调用类
Jul 08 Javascript
初学JavaScript第二章
Sep 30 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
javascript每日必学之继承
Feb 23 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
js removeChild 方法深入理解
Aug 16 #Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 #Javascript
总结Node.js中的一些错误类型
Aug 15 #Javascript
自动化测试读写64位操作系统的注册表
Aug 15 #Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 #Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 #Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 #Javascript
You might like
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
Js的MessageBox
2006/12/03 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
用js简单提供增删改查接口
2019/05/12 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
用Python实现读写锁的示例代码
2018/11/05 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
如何在Python对Excel进行读取
2020/06/04 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
大四学年自我鉴定
2013/11/13 职场文书
关于迟到的检讨书
2014/01/26 职场文书
高二政治教学反思
2014/02/01 职场文书
空乘英文求职信
2014/04/13 职场文书
社会实践活动总结报告
2014/04/29 职场文书
面试通知单大全
2015/04/20 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android