javascript - 即使文件已上传，jQuery 也不会发送表单

Question

我创建了一个函数来验证文件是否已上传。 文件未上传时，表单不应提交，但文件上传后，表单应提交。

但是当我上传文件时，我仍然收到必须上传文件的错误。

这是我使用的 jQuery 代码:

$("#btnSave").click(function () {      
    var vidFileLength = $("#videoUploadFile")[0].files.length;
    if(vidFileLength === 0){
        $("#formType").submit(function(e){
        alert('Selecteer een afbeelding!');
        e.preventDefault();
        });
    }
});

这是表格:

<form action="php/edit.php?id=type" method="post" id="formType">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Website bewerken</h4>
      </div>
      <div class="modal-body">
       <div class="form-group">
            <label>Type ID</label>
            <input type="text" id="typeId" name="typeid" class="form-control" readonly="readonly">
        </div>
        <div class="form-group">
            <label>Type Naam</label>
            <input type="text" id="typeNaam" name="typenaam" class="form-control" >
        </div>
        <div class="form-group">
            <label>Type Waarde</label>
            <input type="text" id="typeWaarde" name="typewaarde" class="form-control" >
        </div>
        <div class="form-group">
            <label>Type Afbeelding</label>
            <input class="input-group" type="file" id="videoUploadFile" name="user_image" accept="image/*" />
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" id="btnSave" name="submit" class="btn btn-primary">Save changes</button>
      </div>
    </form>

感谢您的宝贵时间!

Answer 1

问题是因为您在 if 条件中添加了 submit 事件处理程序，因此一旦表单再次有效，旧的提交处理程序将停止提交.

要解决此问题，您需要将逻辑更改为始终在 submit 处理程序上执行，并在文件不存在时使用 preventDefault() 停止提交。试试这个:

$('#formType').submit(function(e) {
  var vidFileLength = $("#videoUploadFile")[0].files.length;
  if (vidFileLength === 0) {
    alert('Selecteer een afbeelding!');
    e.preventDefault();
  }
});