Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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);

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

Хочу что бы все это дело ушло на сервер одним запросом.
Подскажите как мне это реализовать.
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2014, 11:26
Интересующийся
Отправить личное сообщение для IZLOM Посмотреть профиль Найти все сообщения от IZLOM
 
Регистрация: 08.10.2013
Сообщений: 24

Вот реализовал все таки:

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 form_js = document.getElementById("cv_job");
            //Данные отправляем с помощью объекта XMLHttpRequest, 
            //он позволяет отправлять как обыкновенные данные так и файлы
            //Если бы нам не нужно было отпралять файл то можно было все реализовать обыкновенным Ajax
            xhr = new XMLHttpRequest();
            //Метод Пост, путь, и третий параметр значит что запрос будет синхронный,
            // тобиш пока не получим ответа от сервера код дальше не выполняется
            xhr.open("POST", "/api/job", false);
            //Отправляем все, что в форме
            $('.line_loader').show();
            xhr.send(new FormData(form_js));

            //Получаем ответ от сервера
            var messages = $.parseJSON(xhr.responseText);

            //Если успех то показываем одно, если неудача то другое
            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();

        }
    });


Вот и все, надеюсь кому то поможет мое решение
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно обработать ajax запрос ? enot Общие вопросы Javascript 1 19.05.2014 21:16
Как сделать подрузку <div> через ajax? Feniks000 jQuery 1 11.02.2014 09:44
Как ускорить вставку html из ajax? jey7 AJAX и COMET 7 27.05.2012 11:02
Как отправить данные в .php файл на другой сервер ? lamer AJAX и COMET 2 04.04.2012 23:55
JavaScript как файл закодировать base64? Трактор AJAX и COMET 3 10.06.2008 13:22