1.图片的读取
var fileReader = new FileReader();
fileReader.readAsDataURL(fileObj)
fileReader.onload = function(){
fileReader.result;
//图片的src 该值作为 img src属性值
}
2.文本文件的读取
var fileReader = new FileReader();
fileReader.readAsText(fileObj,"文本原来的字符编码")
fileReader.onload = function(){
fileReader.result;
//文本的内容
}
3.读取多个文件
fileDom.onchange = function(ev){
//选中的所有文件对象
ev.target.files;
}
潜在的BUG。变量提升（作用于提升）---- 重点掌握
- 作用于的概念 (全局作用域，函数作用域)
- 当变量定义在for循环中，定义在for循环中的变量会被提升到作用域的顶部。
- 主程序(for循环)执行的速度用于大于文件加载的速度。
- 造成全局变量被最后一个文件对象替换，导致第一个文件对象加载后，无法通知主程序。也就无法显示第一张图片。
- 解决办法：把文件读取（加载）得逻辑，封装一个方法(function)
推荐阅读
- JavaScript|JavaScript之DOM增删改查(重点)
- html5|各行业工资单出炉 IT类连续多年霸占“榜首”位置
- Shopify如何选品中文教程 – 评估所选品的产品和利基市场的准则上
- Shopify如何选品中文教程 – 评估所选品的产品和利基市场的准则下
- webpack配置|基于webpack3.x的多页面配置（HtmlWebpackPlugin学习篇二 ——动态配置）
- Shopify如何选品中文教程 – 最后一课
- &#x(unicode编码后的汉字)JS转换方法
- 微信小程序页面性能|如何解决微信小程序加载慢的问题（）
- WEB前端|用HTML5canvas绘制一个圆环形的进度表示
- （15）HTML5-分辨率检测