利用html5读取本地文本文件及图片文件

青旅半醒 2022-09-12 12:50 180阅读 0赞

利用html5可以对本地的如文本、图片等文件读取操作，html5定义了一个file对象类型来表示文件，每个file对象对应一个文件。file对象有3个属性：name、size、type。name是不包含路径的文件名，size是以字节为单位的文件体积大小，type则是文件的MIME（例如image/jpg，关于MIME 参考手册 参见https://www.w3school.com.cn/media/media\_mimeref.asp）。

html5访问本地文件系统时，需要先获取File对象句柄，获取文件句柄的方式主要有两种：表单输入（选择文件）、拖拽。

出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：

![20210925114953508.png][]

关于FileReader可见 [FileReader - Web API 接口参考 | MDN][FileReader - Web API _ _ MDN]

FileReader提供的方法：

readAsBinaryString(File|Blob)

readAsText(File|Blob \[, encoding\])

readAsDataURL(File|Blob)

readAsArrayBuffer(File|Blob)

FileReader提供的事件：

onloadstart：文件开始读取时触发

onprogress：当文件正在读取时触发，onprogress事件中，提供了三个属性：lengthComputable（不为真，则event.total等于0）、loaded（已经传输的字节）、total（传输文件总字节）

onload：传输成功完成

onabort：传输被用户取消

onerror：传输中出现错误

onloadend：传输结束，但是不知道成功还是失败

accept属性

【详见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file 页有关部分】

accept 属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号。如：

**表单输入（选择文件）**

这是最常用的场景，用户选择文件以后，触发文件选择框的change事件，通过访问文件选择框元素的files属性可以拿到选择的文件列表。如果文件选择框指定了multiple="multiple"，则一个文件选择框可以同时选择多个文件，files包含了所有选择的文件对象；如果没有指定，则只能选择一个文件，files\[0\]就是所选择的文件对象。

例1、读取本地文本文件并显示的例子，源码如下：

<!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title>读取本地文件文件并显示</title>
    </head>
    <body>
    
    <script>
    function show()
    {
        var reader = new FileReader();
        reader.onload = function() 
        {
            //alert(this.result)
            story.value=this.result
        }
        var f = document.getElementById("filePicker").files[0];
        reader.readAsText(f);
    }
    </script>
    
    <input type="file" name="file" id="filePicker" onchange="show()"  />
    <br>
    
    <textarea id="story" name="story" rows="15" cols="60">
    </textarea>
    
    </body>
    </html>

【注、document.getElementById()是JavaScript获取网页标签元素的方法】

保存为文件名为：读取本地文本文件并显示.html

用浏览器打开效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16][]

例2、读取本地图片文件并显示的例子，源码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
        <title>读取本地图片文件并显示</title>
    </head>
    <body>
         
        <input type="file" id="selectFiles" onchange="dealSelectFiles()" >
        <canvas id="myCanvas" width=1440 height=900></canvas>
      
        <script>
            var imgPosX = 0;
            var imgWidth = 256;
            function dealSelectFiles(){
                // get select files.
                var selectFiles = document.getElementById("selectFiles").files;
      
                for(var file of selectFiles){
                    console.log(file.webkitRelativePath);
                    // read file content.
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onloadend = function(){
                        // deal data.
                        var img = new Image();
                        // after loader, result storage the file content result.
                        img.src = this.result;  
                        img.onload = function(){
                            var myCanvas = document.getElementById("myCanvas");
                            var cxt = myCanvas.getContext('2d');
                            cxt.drawImage(img, imgPosX, 0);
                            imgPosX += imgWidth;
                        }
                    }
                }
            }
        </script>
    </body>
    </html>

保存为文件名为：读取本地图片文件并显示.html

用浏览器打开效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

**拖拽**

拖拽是另一种常见的文件访问场景，这种方式通过dataTransfer的对象来获得拖拽文件列表。同样可以支持多文件拖拽。

下面给出拖拽本地图片文件并显示的参考源码：

<!DOCTYPE html>
     <html>
         <head>
             <meta charset="UTF-8">
             <title>拖拽本地图片文件并显示</title>
             <style type="text/css">
                 #area{width:100%;height:200px; line-height: 200px; text-align: center; border: 1px solid #DDDDDD;}
                 #prev{width:100%;min-height: 400px; border: 1px solid #FF0000;}
             </style>
         </head>
         <body>
             <div id="area">将图片拖放到该区域</div>
             <h1>图片预览</h1>
             <hr />
             <div id="prev"></div>
         </body>
    
       <script>
         window.onload = function(){
             var oArea = document.getElementById("area");
             var oPrev = document.getElementById("prev");
             
             oArea.ondragenter = function(){
                 oArea.innerHTML = "请释放鼠标";
             }
             oArea.ondragleave = function(){
                 oArea.innerHTML = "将图片拖放到该区域";
             }
             oArea.ondragover = function(ev){
                 ev.preventDefault();
             }
             oArea.ondrop = function(ev){
                 ev.preventDefault();
                 var files = ev.dataTransfer.files;
                 for(var i = 0 , len = files.length;i<len;i++){
                     var file = files[i];
                     var reader = new FileReader();
                     reader.readAsDataURL(file);
                     (function(reader){
                         reader.onload = function(){
                             var oImg = document.createElement("img");
                             oImg.src = this.result;
                             oPrev.appendChild(oImg);
                         }
                     })(reader);
                     
                 }
                 
             }
             
         }
       </script>
    </html>

保存为文件名为：拖拽本地图片文件并显示.html

用浏览器打开效果（提示：按着ctrl键单击多个文件名可以一次选择多张图片拖入）：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

在web应用程序中使用文件

[在web应用程序中使用文件 - Web API 接口参考 | MDN][web_ - Web API _ _ MDN]

[20210925114953508.png]: /images/20220828/25539300e70b4d4eab2c4b623258ce85.png
[FileReader - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8f362da77a0441ebb2f32028284bb28f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/a59def6c29bb488f8373fefc1bef2dd7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/60f371b6bcea4a71afcedbf867f8c0fc.png
[web_ - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications