js读取本地文件内容

时间 2019-11-25

原文原文链接

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

　　</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);jquery

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