Html读取本地文件夹下文件

原

Html读取本地文件夹下文件

2018年08月07日 14:09:49

													<span class="tags-box artic-tag-box">
							<span class="label">标签：</span>
															<a data-track-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;con&quot;:&quot;Html&quot;}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=Html&amp;t=blog" target="_blank">Html																</a><a data-track-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;con&quot;:&quot;读取本机文件夹下文件&quot;}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=读取本机文件夹下文件&amp;t=blog" target="_blank">读取本机文件夹下文件																</a><a data-track-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;con&quot;:&quot;FileReader&quot;}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=FileReader&amp;t=blog" target="_blank">FileReader																</a><a data-track-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;con&quot;:&quot;Image base64&quot;}" class="tag-link" href="http://so.csdn.net/so/search/s.do?q=Image base64&amp;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

                     事件处理

                          FileReader.onabort

    处理abort事件。该事件在读取操作被中断时触发。

                          FileReader.onerror

    处理error事件。该事件在读取操作发生错误时触发。