js讀取文本內容,支持csv.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function upload(input) {
//支持chrome IE10
if (window.FileReader) {
var file = input.files[0];
console.log(file)
filename = file.name.split(".")[0];
var reader = new FileReader();
reader.onload = function() {
$("#text").html(this.result)
}
// reader.readAsText(file,"UTF-8");
reader.readAsText(file,"gb2312");
}
//支持IE 7 8 9 10
else if (typeof window.ActiveXObject != 'undefined'){
var xmlDoc;
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(input.value);
alert(xmlDoc.xml);
}
//支持FF
else if (document.implementation && document.implementation.createDocument) {
var xmlDoc;
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;
xmlDoc.load(input.value);
alert(xmlDoc.xml);
} else {
alert('error');
}
}
</script>
<title>file upload</title>
</head>
<body>
<input id='file' type="file" onchange="upload(this)" />【注意,參數傳的是這個input的html元素,若是jquery,此參數是$('#file')[0]】
<div id="text"></div>
</body>
</html>
---------------------------------------------------
fileReader Api
fileReader Api flieReader 三種狀態: FileReader.readyState:0,1,2 0:empty ,沒有文件被load,為空。 1:loading,文件正在被加載。 2:done,讀取請求完成。 fileReader事件處理,6種。 onabort:文件讀取終端,觸發。 onerror:文件遇到錯誤觸發。 onload:文件成功讀取觸發。 onloadstart:文件開始讀取時觸發。 onloadend:文件讀取結束時觸發(無論成功失敗)。 onprogress:文件讀取中觸發。 fileReader讀取方法,5種。 FileReader.abort()。中斷讀取操作,讀取狀態返回為done,即readyState=2。 FileReader.readAsArrayBuffer()。將文件讀取為ArrayBuffer形式。 FileReader.readAsBinaryString() 。將文件讀取為二進制字符串(非標准方法,不推薦使用)。 FileReader.readAsDataURL()。讀取文件的URL,應用場景,本地預覽圖片。 FileReader.readAsText()。將文件已文本形式讀取。即讀取txt等。
