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

利用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

利用html5读取本地文本文件及图片文件相关推荐

前端利用XMLHttpRequest读取本地文本文件
问题前端常见是通过input按钮上传读取文件信息,此时知道本地文件路径需要直接js读取本地文件内的信息注意本地测试,需要解决本地浏览器跨域问题,如: 可查看此链接解决: 解决本地浏览器运行项目是 ...
用 ABAP 读取本地文本文件内容试读版
零基础 ABAP 学习教程系列文章的目录 ABAP 标准培训教程 BC400 学习笔记之一:ABAP 服务器的架构和一个典型的 ABAP 程序结构介绍 ABAP 标准培训教程 BC400 学习笔记之二 ...
Android开发笔记（三十三）文本文件和图片文件的读写
文本文件读写简单文件读写一般是借助于FileOutputStream和FileInputStream,其中FileOutputStream用于写文件,而FileInputStream用于读文件. 写 ...
js读取本地文本文件，并生成Excel文件
一.原理利用js中FileReader对象读取文件(FileReader是一种异步读取文件机制) 1. 创建fileReader对象 2. fileReader对象读取不同文件调用的方法不同,所以 ...
用 ABAP 读取本地文本文件内容
用 ABAP 读取本地文件文本内容是一个常见的需求.假设我有一个文本文件,内容如下: 这个文件在本地存储的位置:"C:\temp\1.txt" 在跟随本文学习之前,请务必先学习完下 ...
Android 读取本地Word/Pdf/Txt文件转文本输出
毫无疑问支持.doc和.docx的只有POI 好多jar都是积分下载,要么就是官网下载,真心垃圾,jar包免费下载: 链接:https://pan.baidu.com/s/14MWWHN3cTsr0m ...
c语言存储图像jpg,用c语言如何读取和保存jpg图片文件?
匿名用户 1级 2012-08-11 回答有这样一个二进制文件,大小在100M左右,里面存放了多张JPG图片,文件格式如下: 无关数据区 JPG图片数据区无关数据区 JPG图片数据区无关数据区 ...
Fortran语言读取本地的in.txt文件
读取指定偶数行存储数组字符串中: ! 读取本地的in.txt配置的参数,按顺序读取一行即可character(len=25) :: param (14),straopen (11, file='in. ...
计算机视觉——利用openCV调用本地摄像头采集图片并截图保存
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.采集方式二.代码部分三.效果演示前言由于本人研究生课题是深度学习目标检测方向.因此需要大量的数据集.在本地 ...

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

利用html5读取本地文本文件及图片文件相关推荐

最新文章

热门文章