HTML5 - 替换标准的上传控件（将上传控件隐藏，通过JS触发）

2016-03-03 发布：hangge 阅读：751

有些人认为用于提交文件的标准 <input> 控件非常难看，像下面这样：

虽然必须得用它，但我们可以把它隐藏起来不让任何人看见它。接着往页面添加一个按钮（其外观我们可以任意修改），用来触发隐藏的 <input> 元素的 click() 方法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Read Text</title>
  <style>
	div {
	 margin-top: 30px;
	 border: solid 1px black;
	 padding: 5px;
	}
  </style>
  <script>

	function showFileInput() {
	  var fileInput = document.getElementById("fileInput");
	  fileInput.click();
	}

	function processFiles(files) {
	  var file = files[0];

	  var message = document.getElementById("message");
	  message.innerHTML = "文件名：" + file.name + "<br>";
	  message.innerHTML += "文件大小：" + file.size + "字节<br>";
	  message.innerHTML += "文件类型：" + file.type + "<br>";
	  
	  var reader = new FileReader();
	  reader.onload = function (e) {
		// 这个事件发生，意为着数据准备好了
		// 把它复制到页面的<div>元素中
		var output = document.getElementById("fileOutput");   
		output.textContent = e.target.result;
	  };
	  reader.readAsText(file);
	}
  </script>
</head>
<body>
  <input id="fileInput" type="file" style="display:none" onchange="processFiles(this.files)">
  <button onclick="showFileInput()">分析文件</button>
  <div id="message"></div>
  <div id="fileOutput"></div>
</body>
</html>