栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

1. FILE API

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

2. example



 


以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 上传文件预览的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/94904.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号