无法使用bootstrapValidator Ajax上载文件

Cannot upload file using bootstrapValidator Ajax

本文关键字:Ajax 上载 文件 bootstrapValidator      更新时间:2023-09-26

我上传文件有问题。i使用bootstrapValidator ajaxSubmit进行表单验证。要在数据库中插入数据,一切都可以正常工作,但要上传的文件却不能正常工作。我使用这个代码:

html:

<form action="target.php" method="post" enctype="multipart/form-data" name="myform" id="myform">
               <div class="form-group">
              <label class="control-label col-sm-3">Username</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="username" name="username" >
              </div>
            </div>
               <div class="form-group">
              <label class="control-label col-sm-3">Description</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="description" name="description">
              </div>
            </div>
          <div class="form-group">
            <label class="control-label col-sm-6">1. File A</label>
            <div class="col-sm-5">
                  <input type="file" name="firstfile" accept="application/pdf"/>
                        <span class="help-block">(Format : .pdf)</span>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-6">2. File B</label>
            <div class="col-sm-5">
            <input type="file" name="secondfile" accept="application/pdf">
            <span class="help-block">(Format : .pdf)</span>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-6">3. File C</label>
            <div class="col-sm-5">
               <input type="file" name="thirdfile" accept="application/pdf">
            <span class="help-block">(Format : .pdf)</span>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-6">4. File D</label>
            <div class="col-sm-5">
              <input type="file" name="fourthfile" accept="image/jpeg">
            <span class="help-block">(Format : .jpg/jpeg)</span>
              </div>
          </div>
  <button type="submit" class="btn btn-primary" name="submit" id="submit">Submit</button>

Javascript:

$(document).ready(function() {
$('#myform').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        username: {
            validators: {
                notEmpty: {
                    message: 'Not Empty'
                }
            }
        },
        description: {
            validators: {
                notEmpty: {
                    message: 'Not Empty'
                }
            }
        },
        firstfile: {
            validators: {
                file: {
                    extension: 'pdf',
                    type: 'application/pdf',
                    minSize: 500*500,
                    message: 'Please choose a pdf file with a size more than 1M.'
                }
            }
        },
        secondfile: {
            validators: {
                file: {
                    extension: 'pdf',
                    type: 'application/pdf',
                    minSize: 500*500,
                    message: 'Please choose a pdf file with a size more than 1M.'
                }
            }
        },
        thirdfile: {
            validators: {
                file: {
                    extension: 'pdf',
                    type: 'application/pdf',
                    minSize: 500*500,
                    message: 'Please choose a pdf file with a size more than 1M.'
                }
            }
        },
        fourthfile: {
            validators: {
                file: {
                    extension: 'jpg',
                    type: 'image/jpeg',
                    minSize: 50*50,
                    message: 'Please choose a pdf file with a size more than 1M.'
                }
            }
        }
    }
    })
.on('success.form.bv', function(e) {
        // Prevent submit form
        e.preventDefault();
        var $form     = $(e.target),
            validator = $form.data('bootstrapValidator');
        $.post($form.attr('action'), $form.serialize(), function(result) {
            console.log(result);
        }, 'json');
        $form.find('.alert').html('Thanks for signing up. Now you can sign in as ' + validator.getFieldElements('namapendaftar').val()).show();
            $form
            .bootstrapValidator('disableSubmitButtons', false)  // Enable the submit buttons
            .bootstrapValidator('resetForm', true);             // Reset the form
});

和Target.php:

$link = mysqli_connect("localhost", "root", "", "testing");
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}     
$username = mysqli_real_escape_string($link, $_POST['username']);
$description = mysqli_real_escape_string($link, $_POST['description']);
$firstfile = mysqli_real_escape_string($link, $_POST['firstfile']); 
$secondfile = mysqli_real_escape_string($link, $_POST['secondfile']); 
$thirdfile = mysqli_real_escape_string($link, $_POST['thirdfile']); 
$fourthfile = mysqli_real_escape_string($link, $_POST['fourthfile']); 
$dir = $username;
$target_dir = "file/$dir/";
if( is_dir($target_dir) === false )
    {
        mkdir($target_dir);
    }
$firstfile = $target_dir . basename($_FILES["firstfile"]["name"]);
$secondfile = $target_dir . basename($_FILES["secondfile"]["name"]);
$thirdfile = $target_dir . basename($_FILES["thirdfile"]["name"]);
$fourthfile = $target_dir . basename($_FILES["fourthfile"]["name"]);
$uploadOk = 1;
$firstFileType = pathinfo($firstfile,PATHINFO_EXTENSION);
$secondFileType = pathinfo($secondfile,PATHINFO_EXTENSION);
$thirdFileType = pathinfo($thirdfile,PATHINFO_EXTENSION);
$fourthFileType = pathinfo($fourthfile,PATHINFO_EXTENSION);
move_uploaded_file($_FILES["firstfile"]["tmp_name"], $firstfile);
move_uploaded_file($_FILES["secondfile"]["tmp_name"], $secondfile);
move_uploaded_file($_FILES["thirdfile"]["tmp_name"], $thirdfile);
move_uploaded_file($_FILES["fourthfile"]["tmp_name"], $fourthfile);
$sql = "INSERT INTO test (username, description, firstfile, secondfile, thirdfile, fourthfile) VALUES ('$username', '$description', '$firstfile', '$secondfile', 'thirdfile', '$fourthfile')";
if(mysqli_query($link, $sql)){
    header("location: index.php?success");
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);

有谁能帮我吗?

  • 检查php.ini文件中的memory_limit、upload_max_filesize和post_max_size
  • 检查应该上传文件的目录的权限
  • 希望这能解决你的问题