js读取文本内容,支持csv.txt

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等。

  

  

原文地址:https://www.cnblogs.com/qq735675958/p/9091031.html