| 利用html5读取本地文本文件及图片文件 | 您所在的位置：网站首页 › js读取ppt › 利用html5读取本地文本文件及图片文件 |
利用html5读取本地文本文件及图片文件
|
利用html5可以对本地的如文本、图片等文件读取操作，html5定义了一个file对象类型来表示文件，每个file对象对应一个文件。file对象有3个属性：name、size、type。name是不包含路径的文件名，size是以字节为单位的文件体积大小，type则是文件的MIME（例如image/jpg，关于MIME 参考常见 MIME 类型列表 - HTTP | MDN (mozilla.org) html5访问本地文件系统时，需要先获取File对象句柄，获取文件句柄的方式主要有两种：表单输入（选择文件）、拖拽。 出于安全考虑，浏览器只允许用户点击来选择本地文件，用JavaScript对的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、读取本地文本文件并显示的例子，源码如下： 读取本地文件文件并显示 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); }【注、document.getElementById()是JavaScript获取网页标签元素的方法】 保存为文件名为：读取本地文本文件并显示.html 用浏览器打开效果：
例2、读取本地图片文件并显示的例子，源码如下： 读取本地图片文件并显示 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; } } } }保存为文件名为：读取本地图片文件并显示.html 用浏览器打开效果：
拖拽 拖拽是另一种常见的文件访问场景，这种方式通过dataTransfer的对象来获得拖拽文件列表。同样可以支持多文件拖拽。 下面给出拖拽本地文本文件并在textarea中显示的源码： 拖拽本地文本文件并显示 .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%; } 拖拽外部文件至此 // 需求：拖拽外部文件到当前页面进行解析 // 获取目标元素 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); } }保存为文件名为：拖拽本地文本文件并显示例.html 用浏览器打开效果（拖入一个文本文件）：
下面给出拖拽本地图片文件并显示的参考源码： 拖拽本地图片文件并显示 #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;} 将图片拖放到该区域 图片预览 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 |
【本文地址】