tofacebook.com -专业IT技术社区(指牛堂) 【百家号】脸书百科,html5 FileReader读取文件 Web程序 - 指牛堂-专业IT技术平台
86°

【百家号】脸书百科,html5 FileReader读取文件 Web程序

标签:部分   pos   list   round   event   dir   fileread   file   position   

项目中需要读取本地的txt文件,上网查了找到了FileReader,是通过H5的<input type="file">来操作的。

下面是项目中的一个简单应用:

1.HTML部分:

  <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
    <span class="file" ><span>录入指纹</span>
    <input type="file" id="fingerPick" ></span>
    <textarea id="finger" placeholder="请录入指纹信息" readonly="readonly" class="je-textarea" style="min-height: 60px;"></textarea>
  </div>

2.css部分:

.file{
width: 100px;
text-align: center;
font-size: 14px;
border-radius: 4px;
position: relative;
display: inline-block;
overflow: hidden;
height: 34px;
line-height: 34px;
margin:-19px 5px;
color: #fff;
background-color: #0074d9;
border-color: #0074d9;
}
.file #fingerPick {
height: 34px!important;
line-height: 34px!important;
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter: ‘alpha(opacity=0)‘;
}

3.JS部分:

$("#fingerPick").click(function() {
  var fingerPick =document.getElementById("fingerPick");
  var finger =document.getElementById("finger");
  fingerPick.addEventListener(‘change‘, function(e){
    handFile(e.target.files[0]);
  });
  function handFile(file){
  var reader = new FileReader();
  reader.onload = function(e){
  finger.value = e.target.result;
  console.log(finger.value)
};
 reader.readAsText(file);
}
});

桌面建个txt,随便输点内容

读取

预览1:技术分享图片

找到文件:技术分享图片

点击打开:技术分享图片

 

······································

OvO完事

html5 FileReader读取文件

标签:部分   pos   list   round   event   dir   fileread   file   position   

原文地址:https://www.cnblogs.com/xgxm13/p/9377052.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: