Html读取本地文件夹下文件

目的

       在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有文件（本例以图片为例）并显示。

技术分析

        存在问题

       Html中file标签获取到的路径时相对的。

       Html中Img指定源时需要的是绝对路径。

        解决方法

     调用Web API接口FileReader中readAsDataURL方法读取数据（这个函数参数file标签获取到的文件路径），然后把数据加载到FileReader中（base64格式），之后就可以用Img来指定源时base64格式的数据，可以绘制图片。

        技术介绍

               FileReader API

                     事件处理

                          FileReader.onabort

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

                          FileReader.onerror

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

                         FileReader.onload

    处理load事件。该事件在读取操作完成时触发。

                         FileReader.onloadstart

    处理loadstart事件。该事件在读取操作开始时触发。

​​​​​​​                         FileReader.onloadend

    处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

​​​​​​​                        FileReader.onprogress

    处理progress事件。该事件在读取Blob时触发。

​​​​​​​​​​​​​​                 方法

                     FileReader.abort()

    中止读取操作。在返回时，readyState属性为DONE。

​​​​​​​                       FileReader.readAsArrayBuffer()

    开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

​​​​​​​                       FileReader.readAsBinaryString()

     开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

​​​​​​​                       FileReader.readAsDataURL()

     开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

​​​​​​​                       FileReader.readAsText()

     开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

事例

         流程

 

         Demo

                 图片文件

                  代码​​​​​​​

 

 

                结果

​​​​​​​                改进​​​​​​​

      采用base64方式，数据量比之前png格式数据多出1/3，可以考虑优化。

      文件信息和数据需要建立映射关系。