JavaScript中使用FileReader读取文件内容

最新推荐文章于 2024-04-26 10:22:03 发布

小小杜w

最新推荐文章于 2024-04-26 10:22:03 发布

阅读量2.1k

点赞数

分类专栏： js读取本地文件文章标签： javascript

本文链接：https://blog.csdn.net/dj7858177/article/details/107106360

版权

js读取本地文件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现：
通过单击按钮读取本地文件中的内容


<html>
<head>
<meta http-equiv="content-type" content="text/JavaScript;charset=utf-8" />
</head>
<input type="file" id="files" name="file" />读取文件: 
<span class="readButton">
  <button>显示</button>
</span>
 <body>
<script>
  function readBlob() {
 
    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }
 
    var file = files[0];
    var start = 0;
    var stop = file.size - 1;
 
    var reader = new FileReader();
 
    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
     if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        var content = evt.target.result;
        var objJson = JSON.parse(content);
        alert(JSON.stringify(objJson));
      }
    };
    var blob = file.slice(start, stop + 1);
    reader.readAsText(blob,"utf-8");
  }
  
  document.querySelector('.readButton').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      readBlob();
    }
  }, false);
</script>
</script>

</body>
</html>

JS原生代码，HBuilder展示结果如下：
展示效果
文件内容为网上随便找的json串，然后保存为了json文件格式
很简单的结构，记录一下~

小小杜w

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中使用FileReader读取文件内容

实现：通过单击按钮读取本地文件中的内容<html><head><meta http-equiv="content-type" content="text/JavaScript;charset=utf-8" /></head><input type="file" id="files" name="file" />读取文件: <span class="readButton"> <button>显示</b
复制链接

扫一扫