Question

验证文件大小后，我需要更改标签内容。

这是我的代码：

.btn_curriculo:before {
  content: "Choose file";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <label class="btn btn-default btn-file btn_curriculo" id="btn_curriculo">
        <input type="file" id="arquivo_curriculo" name="arquivo_curriculo" style="display:none" accept="application/pdf"  onchange="ValidateSize_curriculo(this)" required="require">
      </label>

Answer 1

我认为我有解决方案。

使用jQuery

在这里。

您可以使用removeClass删除一个类，然后使用新内容删除addClass。

function ValidateSize_curriculo(file) {
        var FileSize = file.files[0].size / 1024 / 1024;
        if (FileSize > 1.2) {
          $('#btn_curriculo').removeClass("btn_curriculo");
          $('#btn_curriculo').addClass("file_curriculo_big");
          $('#btn_curriculo').css({"background-color": "red"});
        } else {
          $('#btn_curriculo').removeClass("file_curriculo_big").removeClass("btn_curriculo");
          $('#btn_curriculo').addClass("file_curriculo");
          $('#btn_curriculo').css({"background-color": "#5ab02d"});
        }
    }

.btn_curriculo:before{
  content:"Choose file";
}

.file_curriculo_big:before{
  content: "too big";
  color:white;
}

.file_curriculo:before{
  content: "ok";
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<label class="btn btn-default btn-file btn_curriculo" id="btn_curriculo">
        <input type="file" id="arquivo_curriculo" name="arquivo_curriculo" style="display:none" accept="application/pdf"  onchange="ValidateSize_curriculo(this)" required="require">
      </label>

验证文件大小后如何更改标签？

1 个答案: