废话不多说,直接上代码
<body>
<input type="file" id="files" style="display:none" onchange="chooseFile()" >
<a id="import" class="btn btn-primary btn-sm">导入</a>
</body>
<script>
$("#import").click(function(){//点击导入按钮,使files触发点击事件,然后完成读取文件的操作。(为什么files的style要是none呢,ugly。。。。)
$("#files").click();
});
function chooseFile(){
var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
var name = selectedFile.name;//读取选中文件的文件名
var size = selectedFile.size;//读取选中文件的大小
console.log("文件名:" + name + "大小:" + size);
var reader = new FileReader();//读取操作
reader.readAsText(selectedFile);//读取文件的内容
// reader.readAsBinaryString(selectedFile);
reader.onload = function () {//读取文件是异步进行的,onload方法是读取成功之后,你要进行的操作。
var file = this.result.toString();
// resolve(this.result)
console.log(file);//log
//此处我是进行了一个向后端传输文件的操作
$.ajax({
type: "post",
cache: false,
url: "",
dataType: "text",
ContentType:"application/x-www-form-urlencoded; charset=utf-8",
data: {
"file": file
},
success: function (data) {
console.log(data)
if (data == 0)
alert("导入数据库成功!")
else {
alert("导入失败!")
}
},
error: function (data) {
console.log(data)
alert("未能导入数据库")
}
});
};
}
</script>