原
Html读取本地文件夹下文件
2018年08月07日 14:09:49
<span class="tags-box artic-tag-box">
<span class="label">标签:</span>
<a data-track-click="{"mod":"popu_626","con":"Html"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=Html&t=blog" target="_blank">Html </a><a data-track-click="{"mod":"popu_626","con":"读取本机文件夹下文件"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=读取本机文件夹下文件&t=blog" target="_blank">读取本机文件夹下文件 </a><a data-track-click="{"mod":"popu_626","con":"FileReader"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=FileReader&t=blog" target="_blank">FileReader </a><a data-track-click="{"mod":"popu_626","con":"Image base64"}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=Image base64&t=blog" target="_blank">Image base64 </a>
<span class="article_info_click">更多</span></span>
<div class="tags-box space">
<span class="label">个人分类:</span>
<a class="tag-link" href="https://blog.csdn.net/wap1981314/article/category/7914449" target="_blank">Html </a>
</div>
</div>
<div class="operating">
</div>
</div>
</div>
</div>
<article class="baidu_pl">
<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post">
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-2c6a5211c9.css">
<div class="htmledit_views" id="content_views">
<h1><a name="t0"></a>目的</h1>
在Html上选择本地文件夹,自动读取文件夹及子文件夹下的所有文件(本例以图片为例)并显示。
技术分析
存在问题
Html中file标签获取到的路径时相对的。
Html中Img指定源时需要的是绝对路径。
解决方法
调用Web API接口FileReader中readAsDataURL方法读取数据(这个函数参数file标签获取到的文件路径),然后把数据加载到FileReader中(base64格式),之后就可以用Img来指定源时base64格式的数据,可以绘制图片。
技术介绍
FileReader API
事件处理
处理abort事件。该事件在读取操作被中断时触发。
处理error事件。该事件在读取操作发生错误时触发。