在 CodeIgniter 中使用 AJAX 上传文件即使值为 null/undefined 仍然执行

Question

如果文件尚未输入，我想执行另一个 ajax。但它仍然发布表单操作。

这是我的视图代码：

<form method="POST" id="quiz_file" action="<?php echo site_url('home/upload_quiz/' . $kelas);?>" enctype="multipart/form-data">
   <input name="filequiz" id="filequiz" type="file" />
</form>

这是我的 JS：

$('#submitquiz').on('click', function(event) {
  var inputFile = $('input[name=filequiz]');
  document.getElementById('submitquiz').disabled = true;
  var fileToUpload = inputFile[0].files[0];
  // make sure there is file to upload
  if (undefined != fileToUpload) 
  {
     var uploadURI = $('#quiz_file').attr('action');
     var formData = new FormData();
     formData.append("file", fileToUpload);
     alert('if');
     $.ajax({
        url: uploadURI,
        type: 'post',
        data: 
        {
            formData : formData,
            asid : asid_quiz,
            value : cmbValue
        },
        processData: false,
        contentType: false,
        success: function(data) 
        {

        }
    });
 }
 else
 {
   alert('else');
   $.ajax(
   {        
     type: 'POST',
     url:'<?php echo site_url("home/assignment_score"); ?>',
     data: 
     { 
        asid : asid_quiz,
        value : cmbvalue,
        kelas : <?php echo $kelas;?>,
        dataType:"JSON"
     },
     success: function(data) 
     {
        console.log('asdasd' + data);
        alert('Quiz score submitted');
     }
 });

当我刚刚执行它时，它会显示警报消息“else”。但它仍然执行表单操作的上传操作。

这怎么可能发生？如何停止执行上传操作并在“其他”端执行另一个 ajax 请求？

Answer 1

如果您的提交测验按钮类型是提交，您必须防止点击提交事件，或者您可以将其更改为输入类型按钮。

如果您使用 ajax 发送数据，我也更喜欢您，那么您必须使用输入按钮而不是提交

$('#submitquiz').on('click', function(event) {
event.preventDefault();