使用 FileReader 导入文件到网页元素 原创

使用 FileReader 导入文件到网页元素

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。 

 具体使用可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

使用实例demo

复制JavaScript/***************导入/下载文件 start**************/
//文件上传
function uploadfile() {
var file = $("#mdf")[0].files[0];
//判断上传文件是不是md格式,判断后缀是不是.md
if (file.name.substr(-3).toLocaleLowerCase() != '.md' || file.name.substr(-4).toLocaleLowerCase() != '.txt') {
var reader = new FileReader();
/**
* FileReader的onLoad回调不执行???
* 1、顺序调整一下，先写 onload 再写 readAsText，不然很可能数据都读完了你回调事件还没绑定上呢。
* 2、还是不行的话用onloadend
* @param evt
*/
reader.οnlοad = function (evt) { //文件读取成功完成时触发
//console.log(evt.target.result);
}
reader.readAsText(file, "UTF-8");
//reader.readAsDataURL(file);
reader.onprogress = function () {
layer.msg("读取文件中...");
}
reader.onerror = function () {
layer.msg("读取文件出错！");
}
reader.onabort = function (readRes) {
console.log('加载已取消!');
}
reader.onloadend = function (evt) { //读取完成触发，无论成功或失败
//console.log(evt.target.result);
var data = evt.target.result;
if (data.length == 0) {
layer.msg("文件为空！");
} else {
$('#editor').val(data);
convert();
layer.msg("导入成功！");
}
}
}
else {
alert("请上传格式为md或者txt的文件！");
return false;
}
}
/*************/
/**
* 文件生成并下载
* @param filename 文件名带后缀
* @param text 内容
*/
function downloadfile(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}

function exportMdFile(){
var fileName = $("#articleTitle").val();
if(fileName.length == 0) fileName = "累行客导出MD文件";
var content = $("#editor").val();
if(content.length == 0) {
alert("没有内容哦！不用导出吧^_^");
return false;
}
layer.confirm("确定导出文件？文件类型：.dm；文件名："+fileName,{
btn:["确定", "取消"]
},function(index){
layer.close(index);
var load = layer.load();
setTimeout(function () { //不然load不能立马出来
downloadfile(fileName+".md", content);
layer.close(load);
},500);
},function(){});
}

/***************导入/下载 end**************/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81