Показать сообщение отдельно
  #1 (permalink)  
Старый 21.08.2014, 16:46
Интересующийся
Отправить личное сообщение для IZLOM Посмотреть профиль Найти все сообщения от IZLOM
 
Регистрация: 08.10.2013
Сообщений: 24

Ajax как отправить файл-лы вместе с текстовыми данными
Здравствуйте. Нормального решения данной задачи я не нашел ни с помощью гугла ни с помощью яндекса.
У меня есть форма, в ней есть куча текстовых полей, когда юзер сабмитит форму, запускается функция JS которая собирает все данные, валидирует их, складывает в объект и отправляет PHP, потом уже в PHP я их отправляю на почту. Все было чудесно пока мне не пришлось добавить в эту форму загрузку файла.
И вот проблема заключается в том, что бы не нарушая прошлой конструкции просто добавить еще файл.
Вот пример моей функции:
submit_button.click(function() {

       //Определяем все значения в форме
        contact_name = $('#contact_name').val();
        contact_city = $('#contact_city').val();
        
        

        //Теперь проверим нет ли в форме не заполненых данных, 
        //или ошибок
        var errorList = '';
        errorList = errorList + validation('contact_name');
        errorList = errorList + validation('contact_city');
       

        if (errorList == '') {
            //Если нет ошибок то отправляем данные в PHP
            var dataObject = {
                'contact_name': contact_name,
                'contact_city': contact_city

            }
            //Конвектируем данныв в JSON
            var data = JSON.stringify(dataObject);
            //Отправляем
            $.ajax({
                type: "post",
                url: "/api/job",
                data: {data: data},
                beforeSend: function() {
                    //Перед оправкой данных отображаем лоадер возле кнопки сабмита
                    //Что бы юзер понимал, что процес стартонул 
                    $('.line_loader').show();
                },
                success: function(msg) {

                    var messages = $.parseJSON(msg);
                    if (messages['result'] === true) {
                        $('.wrap').hide();
                        $('.container').removeClass('job_white_wrap');
                        $('.container').addClass('job_inv_wrap');
                        $('.success_div').show();
                    } else {
                        $('.wrap').hide();
                        $('.container').removeClass('job_white_wrap');
                        $('.container').addClass('job_inv_wrap');
                        $('.error_div').show();
                    }
                    $('.line_loader').hide();
                }
            });

        }
    });

У меня еще есть вот такой инпут для загрузки файла:
<input type="file" file-maxsize="2048" file-accept="pdf, doc, docx, txt, rtf" name="file_cv" />

В нете я видел вот такие примеры:
http://javascript.ru/blog/gordon-fre...fajl-javascrip но там нет других данных кроме файла.

Вот еще такой видел вариант:
var formData = new FormData();
formData.append("file", file);
xhr.send(formData);

Но в нем тоже нет других данных, где в нем провести валидацию отдельных полей?

Хочу что бы все это дело ушло на сервер одним запросом.
Подскажите как мне это реализовать.
Ответить с цитированием