实现:
通过单击按钮读取本地文件中的内容
<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文件格式
很简单的结构,记录一下~