如何使用 jquery 输入类型文件过滤器分隔事件

Question

我为输入类型文件做了一个过滤器。它适用于更改功能。有 2 个事件：ok 和 error 以及 2 个消息。

问题是在重新加载（或随时加载）后，输入的页面值为空，但函数 onchange 有效，并在前端给我错误消息（因为没有空值的过滤器访问）。

如果值为空，我想显示第三条消息，但突然我的函数不想工作。

更新

并且不起作用.remove 函数。我做到了，如果有人尝试多次选择一个文件，那么它会收到 1 条消息，而不是消息 = 他尝试的次数。

所以代码

(function($) {
    $('#resume').on('change', function() {
        var err = "error-upload";
        var ok = "upload-ok";
        var ext = $('#resume').val().split(".").pop().toLowerCase();
        if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
            $(".error-upload-wrap").remove(".error-upload");
            $(".error-upload-wrap").remove(".upload-ok");
            $(".error-upload-wrap").append("<div class=" + err + ">Error</div>")
            // false 
        } else {
            $(".error-upload-wrap").remove(".upload-ok");
            $(".error-upload-wrap").remove(".error-upload");
            $(".error-upload-wrap").append("<div class=" + ok + ">Ok</div>");
            // true
        }
    });
})(jQuery);

请帮帮我！

(function($) {
  $('#resume').on('change', function() {
    var err = "error-upload";
    var ok = "upload-ok";
    var ext = $('#resume').val().split(".").pop().toLowerCase();
    if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
      $(".error-upload-wrap").remove(".error-upload");
      $(".error-upload-wrap").remove(".upload-ok");
      $(".error-upload-wrap").append("<div class=" + err + ">Вы загрузили файл в неправильном формате <strong>." + ext + "</strong>! Допустимые форматы: .jpeg, .png, .jpg, .pdf, .doc, .docx</div>")

      // false 
    } else {
      $(".error-upload-wrap").remove(".upload-ok");
      $(".error-upload-wrap").remove(".error-upload");
      $(".error-upload-wrap").append("<div class=" + ok + ">Вы загрузили файл в правильном формате!</div>");
      // true
    }
  });
})(jQuery);

#check_link {
  border: none;
  background-color: #008600;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  float: right;
  margin-left: 15px;
  font-size: 13px !important;
  line-height: 25px !important;
  padding: 0 40px !important;
  color: #fff;
}
.error-upload {
  background-color: #f2dede;
  border-color: #ebccd1;
}
.upload-ok {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.error-upload-wrap div {
  border: 1px solid transparent;
  font-size: 13px;
  color: #767676;
  padding: 15px;
  float: left;
  width: 100%;
  position: relative;
  padding-left: 60px !important;
  line-height: 24px;
  margin-bottom: 20px !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.upload-ok:before {
  content: "\f00c";
}
.error-upload:before {
  content: "\f00d";
}
.error-upload-wrap div:before {
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -11px;
  line-height: 1;
  font-size: 24px;
  font-family: FontAwesome;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="input-text addon" multiple="multiple" id="resume" />
<div class="error-upload-wrap"></div>

Answer 1

为什么不检查 onchange 事件中的值是否为空。如下所示。

    (function($) {
    $('#resume').on('change', function() {
      if(!$.trim($(this).val()) == ''){ // check if input value is not empty
        var err = "error-upload";
        var ok = "upload-ok";
        var ext = $('#resume').val().split(".").pop().toLowerCase();
        if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
            $(".error-upload-wrap").remove(".error-upload");
            $(".error-upload-wrap").remove(".upload-ok");
            $(".error-upload-wrap").append("<div class=" + err + ">Error</div>")
            // false 
        } else {
            $(".error-upload-wrap").remove(".upload-ok");
            $(".error-upload-wrap").remove(".error-upload");
            $(".error-upload-wrap").append("<div class=" + ok + ">Ok</div>");
            // true
        }
      }
      else{ // if its empty
        //do your stuff as the input value is empty.
      }
    });
})(jQuery);

Answer 2

您必须检查要删除的元素是否在 DOM 中实际可用：

$('#resume').on('change', function() {
    var err = "error-upload";
    var ok = "upload-ok";
    var ext = $('#resume').val().split(".").pop().toLowerCase();
    if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
        $(".error-upload-wrap").append("<div class='" + err + "'>Error</div>")
        // false 
    } else {
        $(".error-upload-wrap").append("<div class='" + ok + "'>Ok</div>");
        // true
    }

    if($('.'+err).length || $('.'+ok).length){
       $(".error-upload-wrap").remove(".error-upload, .upload-ok");
    }
});

Answer 3

看起来你需要使用这个，因为

$('selector1') 选择带有selector1 的元素。然后remove('selector2') 删除由selector1 选择的元素，其中也有selector2。

过滤要删除的匹配元素集的选择器表达式。

$(".error-upload-wrap .error-upload").remove();
$(".error-upload-wrap .upload-ok").remove();

请看下面的演示。

(function($) {
  $('#resume').on('change', function() {
    var err = "error-upload";
    var ok = "upload-ok";
    var ext = $('#resume').val().split(".").pop().toLowerCase();
    if ($.inArray(ext, ["doc", "pdf", 'docx', "jpeg", "jpg", "png"]) == -1) {
      $(".error-upload-wrap .error-upload").remove();
      $(".error-upload-wrap .upload-ok").remove();
      $(".error-upload-wrap").append("<div class=" + err + ">Вы загрузили файл в неправильном формате <strong>." + ext + "</strong>! Допустимые форматы: .jpeg, .png, .jpg, .pdf, .doc, .docx</div>")
      // false 
    } else {
      $(".error-upload-wrap .upload-ok").remove();
      $(".error-upload-wrap .error-upload").remove();
      $(".error-upload-wrap").append("<div class=" + ok + ">Вы загрузили файл в правильном формате!</div>");
      // true
    }
  });
})(jQuery);

#check_link {
  border: none;
  background-color: #008600;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  float: right;
  margin-left: 15px;
  font-size: 13px !important;
  line-height: 25px !important;
  padding: 0 40px !important;
  color: #fff;
}
.error-upload {
  background-color: #f2dede;
  border-color: #ebccd1;
}
.upload-ok {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.error-upload-wrap div {
  border: 1px solid transparent;
  font-size: 13px;
  color: #767676;
  padding: 15px;
  float: left;
  width: 100%;
  position: relative;
  padding-left: 60px !important;
  line-height: 24px;
  margin-bottom: 20px !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.upload-ok:before {
  content: "\f00c";
}
.error-upload:before {
  content: "\f00d";
}
.error-upload-wrap div:before {
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -11px;
  line-height: 1;
  font-size: 24px;
  font-family: FontAwesome;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="input-text addon" multiple="multiple" id="resume" />
<div class="error-upload-wrap"></div>