FileReader API
- 使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。
方法
| 方法定义 | 描述 |
|---|---|
| abort():void | 终止文件读取操作 |
| readAsArrayBuffer(file):void | 异步按字节读取文件内容，结果用ArrayBuffer对象表示 |
| readAsBinaryString(file):void | 异步按字节读取文件内容，结果为文件的二进制串 |
| readAsDataURL(file):void | 异步读取文件内容，结果用data:url的字符串形式表示 |
| readAsText(file,encoding):void | 异步按字符读取文件内容，结果用字符串形式表示 |
事件
| 事件名称 | 描述 |
|---|---|
| onabort | 当读取操作被中止时调用 |
| onerror | 当读取操作发生错误时调用 |
| onload | 当读取操作成功完成时调用 |
| onloadend | 当读取操作完成时调用,不管是成功还是失败 |
| onloadstart | 当读取操作将要开始之前调用 |
| onprogress | 在读取数据过程中周期性调用 |
使用方法
FileReader通过异步的方式读取文件内容，结果均是通过事件回调获取
var input = document.getElementById("file"); //input file
input.onchange = function(){
var file = this.files[0];
if(!!file){
//读取本地文件，以gbk编码方式输出
var reader = new FileReader();
reader.readAsText(file,"gbk");
reader.onload = function(){
//读取完毕后输出结果
console.log(this.result);
}
}
}
//显示图片缩略图
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
if (!imageType.test(file.type)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
需求
我们需要在本地读取sql文件，并将其解析，发送给后台，后台返回此sql的表结构
成品如图所示：
未选择.jpg
已选择.jpg
- 使用FileReader来读取文件，并使用文本域textarea来展示文件
<textarea id="content" cols="30" rows="24" class="textarea" name="content" ></textarea>
/**
* 上传函数
* @param fileInput DOM对象
* @param callback 回调函数
*/
var getFileContent = function (fileInput, callback) {
if (fileInput.files && fileInput.files.length > 0 && fileInput.files[0].size > 0) {
//下面这一句相当于JQuery的：var file =$("#upload").prop('files')[0];
var file = fileInput.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
callback(evt.target.result);
// console.log(evt.target.result)
// sql = evt.target.result
// console.log(this.sql)
localStorage.setItem('sql',evt.target.result)
console.log(localStorage.sql)
}
};
// 包含中文内容用gbk编码
// reader.readAsText(file, 'gbk');
reader.readAsText(file, 'utf-8');
}
}
};
/**
* upload内容变化时载入内容
*/
document.getElementById('upload').onchange = function () {
var content = document.getElementById('content');
getFileContent(this, function (str) {
content.value = str;
});
};
// console.log(this.sql)
}
- 由于目前sql文件都不算太大，我是先将其存入localStorage中，比较偷懒，因为这个项目还要重构，所以就没改了😂😂😂
