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

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

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

Read Text

div {

margin-top: 30px;

border: solid 1px black;

padding: 5px;

}

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 + "
";

message.innerHTML += "文件大小：" + file.size + "字节
";

message.innerHTML += "文件类型：" + file.type + "
";

var reader = new FileReader();

reader.onload = function (e) {

// 这个事件发生，意为着数据准备好了

// 把它复制到页面的

元素中

var output = document.getElementById("fileOutput");

output.textContent = e.target.result;

};

reader.readAsText(file);

}

分析文件