使用FormData和jQuery Post发送文件

时间:2020-10-23 08:08:09

标签: html jquery ajax upload

我正在尝试使用jquery post(ajax)发送文件,并且除文件以外的所有数据均已正确发送,“网络”标签中未显示任何文件。

这是我的html表单:

<form class="row" id="vacatureform" enctype="multipart/form-data">
    <div class="col-12 p-0 align-self-center">
        <div class="row">
            <div class="col-12 p-0 input-group">
                <input type="text" id="voornaam" class="form-control" placeholder="Uw voornaam" required>
            </div>
            <div class="col-12 p-0 input-group">
                <input type="text" id="achternaam" class="form-control" placeholder="Uw achternaam" required>
            </div>
            <div class="col-12 p-0 input-group">
                <input type="text" id="email" class="form-control" placeholder="Uw email-adres" required>
            </div>
            <div class="col-12 p-0 input-group">
                <input type="text" id="telefoon" class="form-control" placeholder="Uw telefoonnummer" required>
            </div>
            <div class="col-12 p-0 input-group">
                <input type="file" id="bijlage" class="form-control" placeholder="CV en of motivatiebrief" multiple>
            </div>
            <div class="col-12 p-0 input-group">
                <textarea type="text" id="bericht" class="form-control" placeholder="Uw bericht"></textarea>
            </div>
        </div>
        <div class="row">
          <div class="col-12">
            <span class="mailresult"></span>
          </div>
        </div>
        <div class="row">
            <div class="col-12 p-0 input-group align-self-center">
              <input type="submit" name="submit" value="Verzenden">
              <button class="btn primary-button sendvacaturebtn"><i class="icon-envelope"></i>Verzenden</button>
            </div>
        </div>
    </div>
</form>

$('body').on('submit', '#vacatureform', function(event) {
  event.preventDefault();
   event.preventDefault();
   var voornaam = $('#voornaam').val();
   var achternaam = $('#achternaam').val();
   var email = $('#email').val();
   var telefoon = $('#telefoon').val();
   var bijlage = $('#bijlage')[0].files[0];
   var bericht = $("#bericht").val();
   // needs for recaptacha ready
   grecaptcha.ready(function() {
     // do request for recaptcha token
     grecaptcha.execute('mykey', {action: 'new_email'}).then(function(token) {
     $('#vacatureform').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
       $.post("mail/vraag_mail.php",{voornaam: voornaam, achternaam: achternaam, email: email, telefoon: telefoon, bijlage: bijlage, bericht: bericht, token: token}, function(result) {
         if(result.success) {
           $(".mailresult").slideToggle( "slow", function() {});
           $(".mailresult").html("Bedankt voor je bericht. We nemen snel contact met je op!");
           $("#vacatureform")[0].reset();
         } else {
           $(".mailresult").html("U bent niet geslaagd voor de captcha controle.");
           $("#vacatureform")[0].reset();
         }
       });
     });
   });

var bijlage = $('#bijlage')[0].files[0];是文件的一部分,但没有发布bijlage。为什么呢?

我也尝试添加此内容:

var form = $('vacatureform')[0];
var formData = new FormData(form);

在我的jquery函数的顶部。

0 个答案:

没有答案