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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php5 and xml示例
2006/11/22 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php中上传文件的的解决方案
2018/09/25 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
JS的get和set使用示例
2014/02/20 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python 获取url中的参数列表实例
2018/12/18 Python
详解Python中的测试工具
2019/06/09 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
开朗女孩的自我评价
2014/02/10 职场文书
高中军训感言400字
2014/02/24 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
委托函范文
2015/01/29 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
JavaScript文档对象模型DOM
2021/11/20 Javascript