我有联系表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) {
},
});
}
});