界面中插入txt文件
两种情况:界面中直接插入可以编辑的字符串(markdown或者txt文本),直接在前端进行读取;或者上传文件到服务器,然后读取服务器中的内容。其中的第二种情况是问题7解决。
这里使用JS的方法
<input type="file" accept="img/jpg, img/png, txt/plain" onChange={this.handleUpload}>
</input>
这里可以选择上传文件的文件类型,在HTML标签中进行设定,这样避免上传一些不合法的文件或者CSRF攻击。这个属性在FF和chrome中有效。文件类型的验证最好在上传后或者JS代码进行二次验证。
值 | 描述 |
---|---|
audio/* | 接受所有的声音文件。 |
video/* | 接受所有的视频文件。 |
image/* | 接受所有的图像文件。 |
MIME_type | 一个有效的 MIME 类型,不带参数。 |
可以查看文章:
https://blog.csdn.net/u013379933/article/details/77119796
http://www.iana.org/assignments/media-types/
function handleUpload(event) {
const file = event.target.files[0];
// 获取上传的文件数组的第一个文件
if (file.size) {
// 首先判断文件是否有内容
let reader = new FileReader();
reader.readAsText(file);
// 按照text文件进行读取文件
reader.onload = (resultFile) => {
let pointsTxt = resultFile.target.result;
console.log(pointsTxt);
// 继续处理,显示在界面上或者其他方式
};
}
}
这里的关键就是FileReader,可以查看标准的解释
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
FileReader 对象说明
1、作用:可以使用 JS 异步读取本地文件
// 创建对象
let reader = new FileReader();
// 获取本地文件两种情况:input 元素对应的 FileList 对象;拖放操作生成的 DataTransfer 对象;
const file = event.target.files[0];
// 将本地文件放在对象中(传入的对象是一个Blob对象)
reader.readAsText(file);
// 读取过程是异步的,所以有不同的状态码(类似于AJax)
属性(只读)
FileReader.error
// 出错时的属性
FileReader.readyState
// 上传过程属性,012
FileReader.result
// 上传结果
常用事件
onabort 中断上传事件
onerror 错误上传事件
onload 上传完成事件(最常用)
onprogress 上传过程中事件
方法:将Blob对象按照不同的方式进行读取;在事件 FileReader.onload = function(event){ event.targte.result } 中进行获取转化后的文本。
这里将一个 markdown 文件以四种方式进行上传
FileReader.readAsArrayBuffer()
开始读取指定的Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。ArrayBuffer 类型化数组,类型化数组是JavaScript操作二进制数据的一个接口。最初为了满足JavaScript与显卡之间大量的、实时的数据交换,它们之间的数据通信必须是二进制的,而不能是传统的文本格式的背景下诞生的。
FileReader.readAsBinaryString()
开始读取指定的Blob中的内容。一旦完成,result 属性中将包含所读取文件的原始二进制数据。
开始读取指定的 BLOB中的内容。一旦完成,result 属性中将包含一个 data URL格式的字符串以表示所读取文件的内容。
开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含一个字符串以表示所读取的文件内容。这是最常用的txt上传数据类型。