console 命令行工具 X clear

console

    window.onload = function() {

}
        function upFile() {
          var fileInput = document.getElementById("file");
          //获取附件大小（单位：kb）
          var fileSize =(fileInput.files[0].size / 1024 / 1024).toFixed(2);
          if (fileSize > 20) {
            alert("图片大小不能超过20MB");
          }
          document.getElementById("name").innerHTML = fileInput.value + "<br>大小" + fileSize + "M";
        }

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    
    <body>
      <form class="container clear">
        <div class="up center-block ">
          <!-- accept=".doc,.pdf" -->
          <input type="file" accept=".doc,.pdf,.docx,.dotx,.dot" onchange="upFile()" id="file" />
          <img src="http://t.cn/EXKX6x0" alt="">
        </div>
        <div id="name" class="tac">
        </div>
      </form>
      <script>
      </script>
    </body>

  .tac {
    text-align: center;
  }
  
  .clear::before {
    content: "";
    display: table;
  }
  
  .center-block {
    margin: 0 auto;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
    word-break: break-all;
    word-wrap: break-word;
  }
  
  .up {
    width: 150px;
    height: 150px;
    position: relative;
    margin-top: 160px;
  }
  
  .up input,
  .up img {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    width: 100%;
    height: 100%;
  }
  
  .up input {
    z-index: 100;
    opacity: 0;
  }
  
  #name {
    color: #333;
    padding: 10px;
  }