BulmaUI表单文件控件文件名显示的JS简单解决办法

本文链接：https://blog.youkuaiyun.com/running8/article/details/104453322

Bulma是很易上手的前端UI框架。表单中的文件选择器在使用时要对上传文件做前端验证。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	
<title></title>
	<link rel="stylesheet" href="https://www.zpz42195.com/css/bulma-0.8.0-min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>

		<div class="field">
  <div class="file is-danger has-name is-boxed">
    <label class="file-label">
      <input class="file-input" id="file-input" type="file" name="resume">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </span>
        <span class="file-label">
          Danger file…
        </span>
      </span>
      <span Id="file-name">
        请选择文件
      </span>
    </label>
  </div>
</div>


<script>
var test = document.getElementById('file-input');
test.addEventListener('change', function() {
    var t_files = this.files;
    console.log(t_files);
    var str = '';
        str +=t_files[0].name + t_files[0].type + '大小' + t_files[0].size / 1024 + 'KB';
    document.getElementById('file-name').innerHTML = str;
}, false);
</script>
</body>
</html>