使用input读取文件

小灰灰 2022-06-12 04:44 238阅读 0赞

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

<!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" οnchange="processFiles(this.files)">
    	<div id="fileOutput"></div>
    	<script type="text/javascript">
    		function processFiles(files){
    			// 得到第一个文件
    			var file = files[0];
    			//创建一个FileReader对象
    			var reader = new FileReader();
    			reader.οnlοad=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" οnchange="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.οnlοad=function(e){
    						var output = document.getElementById("fileOutput");
    						output.textContent += e.target.result;
    					}
    					reader.readAsText(file);
    				}
    		}
    	</script>
    </body>
    </html>