[html5 教程]HTML5 上传控件美化实例教程

【www.bbyears.com--css3教程】

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

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

 
 
 
  <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 + "
";
      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);
    }
  </script>


 
  分析文件
 
 

本文来源：http://www.bbyears.com/css/94704.html