Question

Noob在这里，我正在使用jquery验证文件输入形式，并且我希望在文件扩展名不正确时显示一条消息，我这样做是为了显示一条消息，并且该消息消失，但是它只能工作一次，我想要每当他们尝试提交表单时，它都能正常工作。

这就是我所拥有的。

<form id="file_upload" action="" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <input type="file" class="form-control-file" name="fileToUpload" id="exampleInputFile" aria-describedby="fileHelp">
                            <small id="fileHelp" class="form-text text-muted">Favor de subir un archivo valido no mas de 2MB (.pdf, .docx, .doc, .xlsx, .txt).</small>
                            <span class="helper-text"></span>
                        </div>
                        <button type="submit" class="btn submit-archivo">Submit</button>
                    </form>

这是js脚本：

$("#file_upload").submit(function(e) { 
                e.preventDefault();
                helper_text = $('.helper-text');
                if(document.getElementById("exampleInputFile").files.length == 0){
                    helper_text.css("color", "red");
                    helper_text.html('Campo requerido.');
                    helper_text.fadeOut(3000, function() { $(this).remove(); });
                }

                var ext = $('#exampleInputFile').val().split('.').pop().toLowerCase();
                    if($.inArray(ext, ['doc','docx','pdf','ppt', 'pptx', 'xlsx', 'xls', 'csv', 'txt', 'pdf', 'zip', 'rar']) == -1){
                        helper_text.css("color", "red");
                        helper_text.html('Archivo no valido.');
                        helper_text.fadeOut(3000, function() { $(this).remove(); });
                    }
            });

Answer 1

首先，您要删除回调函数中用于淡出的元素，因此将从DOM中删除它。

第二秒，调用淡出后将不会显示，因为该元素将被隐藏，因此您可以执行诸如fadeIn之类的操作来再次显示它。

有关您要实现的目标，请参见下文。我将功能移到了if块中，因为当您检查文件长度和检查扩展名类型时，它两次调用了它。

$("#file_upload").submit(function(e) { 
                e.preventDefault();
                helper_text = $('.helper-text');
                var show_fadeout = false;
                if(document.getElementById("exampleInputFile").files.length == 0){
                 show_fadeout = true;
                }

                var ext = $('#exampleInputFile').val().split('.').pop().toLowerCase();
                    if($.inArray(ext, ['doc','docx','pdf','ppt', 'pptx', 'xlsx', 'xls', 'csv', 'txt', 'pdf', 'zip', 'rar']) == -1){
                    show_fadeout = true;
                    }
                    
                    if(show_fadeout) {
                    helper_text.fadeIn();
                        helper_text.css("color", "red");
                        helper_text.html('Archivo no valido.');
                        helper_text.fadeOut(3000, function() {  });
                    }
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="file_upload" action="" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <input type="file" class="form-control-file" name="fileToUpload" id="exampleInputFile" aria-describedby="fileHelp">
                            <small id="fileHelp" class="form-text text-muted">Favor de subir un archivo valido no mas de 2MB (.pdf, .docx, .doc, .xlsx, .txt).</small>
                            <span class="helper-text"></span>
                        </div>
                        <button type="submit" class="btn submit-archivo">Submit</button>
                    </form>

如何修复FadeOut效果仅在jQuery中工作一次？

1 个答案: