FileReader API
- 使用FileReader對象，web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數(shù)據緩沖)內容卸勺，可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據砂沛。
方法
| 方法定義 | 描述 |
|---|---|
| abort():void | 終止文件讀取操作 |
| readAsArrayBuffer(file):void | 異步按字節(jié)讀取文件內容，結果用ArrayBuffer對象表示 |
| readAsBinaryString(file):void | 異步按字節(jié)讀取文件內容曙求，結果為文件的二進制串 |
| readAsDataURL(file):void | 異步讀取文件內容碍庵，結果用data:url的字符串形式表示 |
| readAsText(file,encoding):void | 異步按字符讀取文件內容，結果用字符串形式表示 |
事件
| 事件名稱 | 描述 |
|---|---|
| onabort | 當讀取操作被中止時調用 |
| onerror | 當讀取操作發(fā)生錯誤時調用 |
| onload | 當讀取操作成功完成時調用 |
| onloadend | 當讀取操作完成時調用,不管是成功還是失敗 |
| onloadstart | 當讀取操作將要開始之前調用 |
| onprogress | 在讀取數(shù)據過程中周期性調用 |
使用方法
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文件，并將其解析挤渐，發(fā)送給后臺马绝，后臺返回此sql的表結構
成品如圖所示：
未選擇.jpg
已選擇.jpg
- 使用FileReader來讀取文件，并使用文本域textarea來展示文件
<textarea id="content" cols="30" rows="24" class="textarea" name="content" ></textarea>
/**
* 上傳函數(shù)
* @param fileInput DOM對象
* @param callback 回調函數(shù)
*/
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中富稻，比較偷懶，因為這個項目還要重構白胀，所以就沒改了??????
