HTML5使用input读取文件-优快云博客

读取一个包含文本内容的文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#fileOutput{
			width: 400px;
			height: 300px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<input type="file" id="fileInput" onchange="processFiles(this.files)">
	<div id="fileOutput"></div>
	<script type="text/javascript">
		function processFiles(files){
			// 得到第一个文件
			var file = files[0];
			//创建一个FileReader对象
			var reader = new FileReader();
			reader.onload=function(e){
				var output = document.getElementById("fileOutput");
				output.textContent = e.target.result;
			}
			reader.readAsText(file);
			// readAsText只能够处理包含文本内容的文件csv，xml,html等,不能够处理二进制文件
		}
	</script>
</body>
</html>

读取一个文件不过瘾，那么我们读取多个文件试试，其实我们只要在选择文件加一个multiple。然后对于显示内容做一个循环处理就可以了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#fileOutput{
			width: 400px;
			height: 300px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<input type="file" id="fileInput" onchange="processFiles(this.files)" multiple>
	<div id="fileOutput"></div>
	<script type="text/javascript">
		function showFileInput(){
			var fileInput = document.getElementById("fileInput");
			fileInput.click();
		}
		function processFiles(files){
				for(var i=0;i<files.length;i++){
					// 得到第一个文件
					var file = files[i];
					//创建一个FileReader对象
					var reader = new FileReader();
					reader.onload=function(e){
						var output = document.getElementById("fileOutput");
						output.textContent += e.target.result;
					}
					reader.readAsText(file);
				}
		}
	</script>
</body>
</html>