JavaScript中使用FileReader读取文件内容

    技术2023-08-20  97

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

    <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文件格式 很简单的结构,记录一下~

    Processed: 0.014, SQL: 9