Wordpress Contact Form7 Ajax文件上传

时间:2018-12-27 20:06:35

标签: jquery ajax wordpress contact-form-7

我有联系表7 wordpress插件构建的表单。现在我只想通过ajax添加文件附件。可能那里已经有我找不到的解决方案。但是,我在这里看到很多示例,但没有任何结果。例如这个 Jquery ajax single file upload 这是我的表单

<form action="<?=current_page_url();?>#wpcf7-f138-o1" id="orderForm" method="post" class="wpcf7-form sent" enctype="multipart/form-data" novalidate="novalidate">
<div style="display: none;">
    <input type="hidden" name="_wpcf7" value="138" />
    <input type="hidden" name="_wpcf7_version" value="5.1.1" />
    <input type="hidden" name="_wpcf7_locale" value="ru_RU" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f138-o1" />
    <input type="hidden" name="_wpcf7_container_post" value="0" />
    <input type="hidden" name="g-recaptcha-response" value="" />
</div>
    <div class="modal-content">
        <div class="modal-header">
            <img src="<?=get_the_post_thumbnail_url();?>" alt="">
            <h5 class="modal-title"><?=the_title();?></h5>
            <p><?=get_queried_object()->name;?></p>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span class="closeModal" aria-hidden="true"></span>
            </button>
        </div>
        <div class="modal-body">
            <div class="input-group lg-block">
                <label for="">Используемый материал:</label>
                <select name="menu-145" id="material" class="input-bd-bottom">
                    <option value="ЛДСП">ЛДСП</option>
                    <option value="Кухни">Кухни</option>
                </select>
            </div>
            <div class="input-group lg-block">
                <label for="">Ваше имя</label>
                <input name="your-name" type="text" class="requirements input-bd-bottom">
            </div>
            <div class="input-group lg-block">
                <label for="">Телефон</label>
                <input name="tel-680" type="tel" class="input-bd-bottom">
            </div>
        </div>
        <div class="modal-footer">
            <textarea name="your-message" id="" placeholder="Пожелания или примечание"></textarea>
            <label for="file" class="fileinput"><span><img src="<? bloginfo('template_directory') ?>/img/file.png" alt=""></span> <p id="file-name"> Прикрепить файл </p><i id="file-close" class="file-close"></i> <input id="file" name="file-840" type="file"></label>
            <button type="submit" class="btn-green">Отправить</button>
        </div>
        <input name="kuhnya_name" type="hidden" value="<?=the_title();?>">
    </div>
</form>

我的Jquery脚本

var frm = $('#orderForm');

frm.submit(function (e) {
    e.preventDefault();
  var inputName = $('#orderForm #name');
  var inputPhone = $('#orderForm #phone');
  if(inputName.val() === ''){
    inputName.css({borderBottom: '1px solid red'});
    inputPhone.css({borderBottom: '1px solid #fff'});
  } else if(inputPhone.val() === ''){
    inputPhone.css({borderBottom: '1px solid red'});
    inputName.css({borderBottom: '1px solid #fff'});
  }
  else{
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        dataType: 'json',
        processData: false,  // tell jQuery not to process the data
        contentType: false,  // tell jQuery not to set contentType
        success: function (data) {
            $("#getCodeModal").modal('show');
            inputName.css({borderBottom: '1px solid #fff'});
            inputPhone.css({borderBottom: '1px solid #fff'});
        },
        error: function (data) {

        },
    });
  }

});

0 个答案:

没有答案