Javascript 验证输入类型文件

Posted 2023-03-14

【中文标题】Javascript 验证输入类型文件

【英文标题】：Javascript validation input type file

【发布时间】：2016-09-23 13:40:34

【问题描述】：

我正在使用 jquery validate 方法，并且我正在使用自定义 javascript 来显示由于 css 问题而上传的图像名称。

当没有指定输入文件时显示验证消息，但当用户上传文件时，仍然显示消息。当用户单击某处时，它会删除。那就是问题所在。当用户添加一些图像时，它应该被删除。

我应该如何解决这个问题？

我的代码如下：

$(document).ready(function() 
var rules, msgs, inputName;
rules = ;
msgs = ;

var images = ['front_passport', 'back_passport'];
var extn = "jpeg|jpg|png|pdf";
for (var i = 0; i < images.length; i++) 
    var inputImage = images[i];
    rules[inputImage] = ;
    rules[inputImage].required = true;
    rules[inputImage].extension = extn;

    msgs[inputImage] = 'Please provide an image with one of the following extensions : jpg, png or pdf';




var validateObj = 
validateObj["rules"] = rules;
validateObj["messages"] = msgs;
validateObj["onkeyup"] = function(element) 
    $(element).valid();
;
validateObj["errorPlacement"] = function(error, element) 
    if ($(element).hasClass('app-file')) 
        error.insertAfter($(element).next().next());
    

;
validateObj["success"] = function(element) ;
validateObj["submitHandler"] = function(form) 
    form.submit();


//files displaying image name



'use strict';

(function(document, window, index) 
    var inputs = document.querySelectorAll('.app-file');
    Array.prototype.forEach.call(inputs, function(input) 
        var label = input.nextElementSibling,
            labelVal = label.innerhtml,
            divName = label.nextElementSibling;

        input.addEventListener('change', function(e) 
            var fileName = '';
            if (this.files && this.files.length > 1)
                fileName = (this.getAttribute('data-multiple-caption') || '').replace('count', this.files.length);
            else
                fileName = e.target.value.split('\\').pop();

            if (fileName) 
                divName.innerHTML = fileName;
             else 
                label.innerHTML = labelVal;
            
            $("#individual-form").validate(validateObj);
        );

        // Firefox bug fix
        input.addEventListener('focus', function() 
            input.classList.add('has-focus');
        );
        input.addEventListener('blur', function() 
            input.classList.remove('has-focus');
        );
    );
(document, window, 0));
$("#individual-form").validate(validateObj);
);

<div class="form-group">
   <label for="front_passport" class="col-md-2 label-file">Front ID/Passport</label>
   <div class="form-required">*</div>
   <div class="col-md-8">
   Form::file('front_passport',  ["class"=>"app-file"]) 
  <label for="front_passport" class="file-upload"><span>Upload a File</span></label>
  <div class="file-name"></div>
   </div>
</div>
<div class="form-group">
   <label for="back_passport" class="col-md-2 label-file">Back ID/Passport</label>
   <div class="form-required">*</div>
   <div class="col-md-8">
   Form::file('back_passport',  ["class"=>"app-file"]) 
  <label for="back_passport" class="file-upload"><span>Upload a File</span></label>
  <div class="file-name"></div>
   </div>
</div>

已编辑：我找到了这样的解决方案： $(this).next().next().next().remove();

但不是这种方法，如何选择下一个带有 error 类的标签 - 实际上这是我要删除的错误消息？

更新：我在提交表单并且没有上传文件时的 html 标记是：

<div class="col-md-8">

  <input type="file" name="front_passport" class="app-file error">
  <label class="file-upload" for="front_passport"><span>Upload a File</span></label>
  <div class="file-name"></div><label for="front_passport" generated="true" class="error">Please provide an image with one of the following extensions : jpg, gif, png or pdf</label>
</div>

【问题讨论】：

$(this).find('.error') ?

【参考方案1】：

我找到了解决方案 - 向 div 添加了一个新类，然后将其删除：

if( fileName ) 
  divName.innerHTML = fileName;
  $(this).parents('.file-wrapper').find('.error').remove();

<div class="form-group">
  <label for="front_passport" class="col-md-2 label-file">Front ID/Passport</label>
  <div class="form-required">*</div>
  <div class="col-md-8 file-wrapper">

     Form::file('front_passport',  ["class"=>"app-file"]) 
    <label for="front_passport" class="file-upload"><span>Upload a File</span></label>
    <div class="file-name"></div>
  </div>
</div>