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

学习&实践爱好者

已于 2022-12-21 17:14:04 修改

阅读量1.9w

点赞数 20

分类专栏： HTML5与CSS3 JavaScrip技术文章标签： html5 javascript html

于 2021-09-25 17:09:14 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/120469779

版权

JavaScrip技术同时被 2 个专栏收录

106 篇文章 20 订阅

订阅专栏

HTML5与CSS3

75 篇文章 13 订阅

订阅专栏

利用html5可以对本地的如文本、图片等文件读取操作，html5定义了一个file对象类型来表示文件，每个file对象对应一个文件。file对象有3个属性：name、size、type。name是不包含路径的文件名，size是以字节为单位的文件体积大小，type则是文件的MIME（例如image/jpg，关于MIME 参考常见 MIME 类型列表 - HTTP | MDN (mozilla.org)

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

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

关于FileReader可见 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

用浏览器打开效果：

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>读取本地图片文件并显示</title>
</head>
<body>
    <!-- multiple 一个文件选择框可以同时选择多个文件
      <input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory> 
    --> 
    <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

用浏览器打开效果：

拖拽

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

下面给出拖拽本地文本文件并在textarea中显示的源码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>拖拽本地文本文件并显示</title>
 <style>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            box-shadow: 0 0 10px 5px rgba(0,0,0,.8);
            border-radius: 10px;
            line-height: 400px;
            text-align: center;
            font-size: 30px;
            font-weight: 700;
            text-shadow:0 0 5px;
            transition:all 1s;
        }
      .box #entity{
            width: 100%;
            height: 100%;
       }
</style>
 </head>
 <body>
 <div class="box">拖拽外部文件至此</div>
 <script>
     // 需求：拖拽外部文件到当前页面进行解析
     // 获取目标元素
    var box = document.querySelector('.box');
  
    //解决一旦拖拽外部文件就覆盖掉当前页面的问题
    //  解决：给document绑定drop事件 
    //  drop事件默认触发不了，需要在dragover事件里面阻止默认事件
    document.ondrop = function(e){
        e.preventDefault();
    }
    // 这个阻止默认事件是为了让drop事件得以触发
    document.ondragover = function(e){
        e.preventDefault();
    }
 
    box.ondragenter = function(){
        box.style.boxShadow = '0 0 10px 5px rgba(255,0,0,.8)';
    }
 
    box.ondrop = function(e){
        // console.log(e);
        // 得到拖拽过来的文件
        var dataFile = e.dataTransfer.files[0];
        // FileReader实例化
        var fr = new FileReader();
        // 异步读取文件
        fr.readAsText(dataFile);
        // 读取完毕之后执行
        fr.onload = function(){
            // 获取得到的结果
            var data = fr.result;
 
            var ta = document.createElement('textarea');
            ta.value = data;
            ta.id='entity';
            box.innerHTML = '';
            box.appendChild(ta);
 
        }
    }
</script> 
</body> 
</html>

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

用浏览器打开效果（拖入一个文本文件）：

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

<!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键单击多个文件名可以一次选择多张图片拖入）：

在web应用程序中使用文件

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

学习&实践爱好者

关注

20
点赞
踩
94

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用html5读取本地文本文件及图片文件

利用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）。
复制链接

扫一扫