JavaScript读取本地文件

最新推荐文章于 2024-10-08 19:23:21 发布

MSiHan

最新推荐文章于 2024-10-08 19:23:21 发布

阅读量3.6k

点赞数 2

分类专栏： js html 文章标签： js csv

本文链接：https://blog.csdn.net/Wiiyh/article/details/118608962

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

HTML读取本地文件

使用js读取csv文件
- 创建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>