如何在验证文件大小后更改标签？ [英] How can i change a label after validate a file size?

问题描述

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

I need change a label content after validate a file size.

这是我的代码：

.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>

推荐答案

我想我有解决方案。

使用jQuery

这里。

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

you can remove a class with the removeClass then addClass with a new content.

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>

这篇关于如何在验证文件大小后更改标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！