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

看起来你需要使用它，因为

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);

请参阅下面的演示。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

<mappers>
  <package name="org.mybatis.builder"/>
</mappers>

＆＃13;

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

为什么不检查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);

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

3 个答案: