js读取本地文件内容

最新推荐文章于 2025-07-22 16:26:11 发布

转载最新推荐文章于 2025-07-22 16:26:11 发布 · 686 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dragon-cat/p/9674376.html

本文介绍如何使用HTML和JavaScript实现文件导入功能，包括文件选择器的使用、文件信息读取及显示。

<!doctype html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Document</title>

　　</head>
　　<body>
　　　　<div>
　　　　　　<input type="file" id="files" style="display: none" onchange="fileImport();">
　　　　　　<input type="button" id="fileImport" value="导入">
　　　　　　<div id="resultDiv"></div>
　　　　</div>
　　　　<script src="./jquery-1.12.2.js"></script>
　　　　<script>
　　　　　　//点击导入按钮,使files触发点击事件,然后完成读取文件的操作
　　　　　　$("#fileImport").click(function () {
　　　　　　　　$("#files").click();
　　　　　　})
　　　　　　function fileImport() {
　　　　　　　　//获取读取我文件的File对象
　　　　　　　　var selectedFile = document.getElementById('files').files[0];
　　　　　　　　var name = selectedFile.name;//读取选中文件的文件名
　　　　　　　　var size = selectedFile.size;//读取选中文件的大小
　　　　　　　　console.log("文件名:"+name+"大小:"+size);

　　　　　　　　var reader = new FileReader();//这是核心,读取操作就是由它完成.
　　　　　　　　reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
　　　　　　　　reader.onload = function () {
　　　　　　　　　　//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
　　　　　　　　　　console.log(this.result);
　　　　　　　　　　$('#resultDiv').html(this.result);
　　　　　　　　}
　　　　　　}
　　　　</script>
　　</body>
</html>

转载于:https://www.cnblogs.com/dragon-cat/p/9674376.html