Доброго времени суток.
Есть проблема.
Не могу отправить прикрепленное фото в input type="file".
Метод .serialize для оправки изображений я так понял не подходит.
И я почитал про метод formData и вроде бы чуть чуть понял.Что к чему.
Но на практике ничего не получается.
Вот код формы
<form id="ajaxform" class="form-container" enctype="multipart/form-data">
<div class="form-title"><h2>Подать объявление</h2></div>
<div class="form-title">Выберете категорию:</div>
<select class="form-field" type="text" name="category">
<option>Работа</option>
<option>Недвижимость</option>
<option>Аренда</option>
<option>Услуги</option>
<option>Автомобили и Мотоциклы</option>
<option>Компьютеры и Мобильные устройства</option>
<option>Бытовая техника</option>
<option>Животные</option>
</select><br />
<div class="form-title">Заголовок объявления.<br/>Например:Продам ВАЗ 2107.<br/>Или: Ищу работу.</div>
<input class="form-field" type="text" name="title" maxlength="30"/><br />
<div class="form-title">Ваше объявление:
Постарайтесь кратко излагать мысли и не превышать лимит в 300 символов.<br/>
Например: Требуется токарь.Зарплата миллион рублей.<br/>
Или: Продам ВАЗ за миллион долларов.</h2><br /><br /><br />
<textarea cols="55" rows="10" placeholder="Напишите ваше объявление..." name="text" maxlength="300"></textarea></div>
<div class="form-title">Ваши контакты:<br/>Например - email или Номер телефона.</div>
<input class="form-field" type="text" name="contacts" maxlength="30"/><br />
<div class="form-title">По желанию можно добавить фото.<br/>Макс. размер фото - 3мб.</div>
<input class="form-field" id='upload' type="file" name='filename' /><br />
<div class="submit-container">
<input class="submit-button" type="submit" value="Подать объявление" />
</div>
</form>
Вот код ajax jquery
$("#ajaxform").submit(function(e){
e.preventDefault();
var error = false;
var form = $('#ajaxform');
form.find('input:not(input[type="submit"],input[type="file"]), textarea').each( function(){
if ($(this).val() == '') {
$(this).val('Обмануть решили?:)');
error = true;
form.find('input[type="submit"]').hide();
}
$('input,textarea').focus(function(){
$(this).val("");
$('input[type="submit"]').show().val("Подать объявление");
})
});
if (!error) {
var fd = new FormData();
fd.append('image', $('input[type=file]')[0].files[0]);
fd.append('category', $('input[name=category]').html());
fd.append('title', $('input[name=title]').val());
fd.append('text', $('input[name=text]').html());
fd.append('contacts', $('input[name=contacts]').val());
$.ajax({
type: 'POST',
url: 'gogogo.php',
data: fd,
processData: false,
beforeSend: function(data) {
form.find('input[type="submit"]').attr('disabled', 'disabled');
},
complete: function(data) {
form.find('input[type="submit"]').prop('disabled', false);
$('#ajaxform').html("<p style='color:#FFF;'>Ваше обьявление будет добавлено в течении 1-суток.Сразу после рассмотрения модератором.</p>");
}
});
}
return false;
});
Но при использовании этого метода я не могу получить значения полей textarea и select.
В логах пишут вот такие дела:
------WebKitFormBoundarypdf7H0Rnvuik4goW
Content-Disposition: form-data; name="text"
undefined
------WebKitFormBoundarypdf7H0Rnvuik4goW
Ничего не понимаю
Практики в решении таких задач не было.
Если кто то оправлял через ajax методомformDate данные подскажите кто как может
