背景 |
最近项目上需要用到把企业文化用试题的方式发给员工,所以这个时候需要用到导入功能,最开始想到的是在后台使用,但是感觉貌似很简单,所以就采用了js进入导入excel内容,然而也是非常简单啊~~
FileReader |
在介绍导入excel表格内容之前我先给大家接受一下什么是Filer
他表示可以web应用程序可以异步的督导区存储在用户计算机上的文件,或者是数据缓冲的内容,也可以file或者BLOB的对象
其实就是读取文件
FileReader的实例拥有4个方法,其中3个用以读取文件,另一个用来中断读取
1、readAstext默认是UTF-8形式的,得到的就是文本文件中的内容
2、readAsBinaryString该方法文件读取为二进制字符串,通过我们将他传送到后端,然后后端根据这端json字段进行存储
3、readAsDataURL,该方法读取为一段data开头的字符串,这段字符串实质就是data Url,,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。(其中base64的方式就是由此来获得的。。)
FileReader处理事件函数
代码实践 |
我才用的是二进制的方式来实现,然后再把他们转换为json字符的形式传给后台,在control层中我用的是字符串接收,然后把他们转换为了list类型传输到后台
可以实现导入数据的根本原因在于我使用了xlsx,可以使用导入excel我知道在js实现的有两种方式,这是其中的一种,另一种是 下面的方式,其实这种方式也可以,但是只要ie支持他,像谷歌或者火狐都不支持,原因是应该他非常的安全,所以在这种情况下我选择了xlsx
var oXL = new ActiveXObject("Excel.application");
<body style="text-align:center">
<div class="login">
<div class="DivCenter">
<p class="PStyle">企业微信导入题库</p>
<input type="file" onchange="importf(this)" />
<div id="demo"> </div>
</div>
</div>
<script language="javascript" type="text/javascript">
/*
FileReader共有4种读取方法:
1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
2.readAsBinaryString(file):将文件读取为二进制字符串binary
3.readAsDataURL(file):将文件读取为Data URL
4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'
*/
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
var varTrstr;
function importf(obj) {//导入,obj代表excel的路径
//如果路径为空则返回
if(!obj.files) {
return;
}
//表示第一个文件
var f = obj.files[0];
//读取文件,采用的是二进制的方式
var reader = new FileReader();
//采用事件为文件读取完的时候触发
reader.onload = function(e) {
var data = e.target.result;
//是否进行手动转换
if(rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
//二进制转换方式
wb = XLSX.read(data, {
type: 'binary'
});
}
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
// document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
varTrstr = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
// varTrstr = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
importdata();
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
//采用二进制
reader.readAsBinaryString(f);
}
}
function fixdata(data) { //文件流转BinaryString
var o = "",
l = 0,
w = 10240;
for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
//data: JSON.stringify(jsonT),
}
function importdata () {
var jsonT = varTrstr;
var t=1
$.ajax({
type: 'post',
url: 'Default/getjson',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{str:'" + jsonT + "'}",
success: function (data) {
if (data == true) {
alert("恭喜您导入成功")
}
}
})
}
</script>
Control
public bool getjson(string str)
{
//序列化
javaScriptSerializer js = new JavaScriptSerializer();
//转换为list类型
List<Model.test> list = js.Deserialize<List<Model.test>>(str);
Boolean falg = importBLL.Import(list);
return falg;
}
效果显示 |
总结 |
回过头看看其实挺简单的,并且非常开心的事情在于整个框架和功能到最后的部署都是自己一个人完成的,只用了1天半的时间,所以非常的开心