HTML读取本地文件
使用js读取csv文件
html网页，使用input元素设置type=“flie” 文件类型，获取本地csv文件，在javascript中使用FileReader读取文件内容
创建html文件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>读取本地文件</title> </head> <body> <div> <input type="file" id="files" style="display: none" onchange="fileImport()" multiple> <!-- 可以添加multiple属性多选 --> <input type="button" id="fileImport" value="导入" onclick="filed()" > </div> <div> 显示进度： <progress id="progre" value="0" style="width: 300px;"></progress> </div> <div id="result"></div> <script> //点击导入按钮,使files触发点击事件,然后完成读取文件的操作 function filed() {
document.getElementById('files').click(); } function fileImport() {
//获取读取文件的File对象 var selectedFile = document.getElementById('files').files[0]; console.log(selectedFile) var name = selectedFile.name; //读取选中文件的文件名 var size = selectedFile.size; //读取选中文件的大小 console.log("文件名:" + name + "大小:" + size); var reader = new FileReader(); //这是核心,读取操作就是由它完成. reader.readAsText(selectedFile,"GB2312"); //读取文件的内容,参数二设置编码，不设置默认utf-8 // reader.readAsDataURL(selectedFile);//读取文件的URL // reader.abort() //终止读取 // reader.readAsArrayBuffer(selectedFile);//异步按字节读取文件内容，结果用ArrayBuffer对象表示 // reader.readAsBinaryString(selectedFile);//异步按字节读取文件内容，结果为文件的二进制串 var pro = document.getElementById('progre'); pro.max = selectedFile.size; pro.value = 0; reader.onprogress = function (e) {
pro.value = e.loaded; } reader.onload = function() {
//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可 console.log(JSON.stringify(this.result)) var str = reader.result; var rows = str.split('\n'); console.log(rows) document.getElementById('result').innerHTML = str; } reader.onerror= function() {
console.log("读取失败") } } </script> </body> </html> MDN链接: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader.
中文乱码
readAsText（blob[, encoding]）方法中设置第二个参数编码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/200427.html原文链接：https://javaforall.net
