1

Подскажите, почему файл не получается передать на сервер?

   <form action="" enctype="multipart/form-data" accept="image/*">
                    <div class="col-md-offset-1 col-md-5">
                        <input type="text" name="name" placeholder="Имя" requered><br>
                        <input type="text" name="phone" placeholder="Телефон" requered><br>
                        <input type="text" name="email" placeholder="E-mail"><br>
                        <textarea id="" cols="30" rows="10" placeholder="Комментарий" name="text-comments"></textarea>
                        <input type="file" name="file"><br>
                        <input id="form-action" type="button" class="send" value="Купить в один клик"><br>
                    </div>
                </form>

$(document).ready(function(){

    $(document).on("click","#form-action", function(event){
        event.preventDefault();
        if($("input[name='fio']").val()!="" && $("textarea").val()!=""){

            var data = $("form").serialize();
            $.post("/ajax/handler.php",{data},function(data,status){
                console.log(data);
                $(".block_error").html("<div class='col-md-offset-1 text-left'><span style='color:#f29400'>Ваше сообщение отправленно.</span></div>");
                //location.reload();
            }); 
        }
        else {
            $(".block_error").html("<div class='col-md-offset-1 text-left'><span style='color:red'>Заполните обязательные поля</span></div>");
        }
    })

});
1

2 ответа 2

2

Написал вот такой костыльный вариант, буду рад если кто нибудь его оптимизирует

$(document).ready(function(){

    $(document).on("click","#form-action", function(event){
        event.preventDefault();

        file = new FormData();
        file.append( 'file', $('input[type=file]')[0].files[0] );

        var data = $("form").serialize();

        $.ajax({
            type: "POST",
            processData: false,
            contentType: false,
            url: "/ajax/handler.php.php",
            data:  file, 
        })
        .done(function( file ) {
            console.log(file)
        });
        $.ajax({
            type: "POST",
            url: "/ajax/handler.php.php",
            data:  {data}, 
        })
        .done(function( data ) {
            console.log(data)
        });
    })

});
2
  • 1
    Конструктор FormData позволяет принять уже поля с формы.... то есть... если у формы будет к примеру name="myform", то можно написать var formData = new FormData(document.forms.myform); либо var formData = new FormData(document.forms[0]); ......... а далее просто добавить файл formData .append( 'file', $('input[type=file]')[0].files[0] ); и уже просто тупо отправить в одном запросе data: formData 3 сен 2016 в 15:07
  • 1
    то есть в итоге что-то типа такого pastebin.com/MdTXgeGC и никаких костылей 3 сен 2016 в 15:13
-4

Формы с файлами нельзя сабмитить аяксово. Кажется, это связано с безопасностью. В любом случае - нельзя, факт. Но решения есть.

Часть решений перед аяксовой отправкой формы смотрит, есть ли в ней файлинпуты, и есть ли в файлинпутах файлы. И, если есть - скрипт сабмитит форму неаяксово.

Пример такого решения: turbolinks

Другая часть решений при сабмите формы создает невидимый iframe с ней же и сабмитит ее неаяксовым методом. Так как iframe невидим - то со стороны пользователя форма сабмитится "как будто" аяксово. Скрипт тем временем следит за iframe, и когда в него приходит ответ от сервера - скрипт вставляет содержимое iframe в страницу, а сам iframe удаляет.

Пример такого решения: jquery-iframe-transport

Еще одним решением является аяксовая отправка файлов мимо формы. Например blueimp/jQuery-file-upload делает так. В этом случае в форме не должно быть инпутов для выбора файлов, сами файлы будут закачиваться независимо от формы.

2
  • через аякс можно передавать файлы, но нельзя сабмитить формы с файлами 3 сен 2016 в 12:31
  • @ChromeChrome, странно, что вы удалили свой комментарий, мое уточнение потеряло смысл. Вы говорили, что я ошибаюсь, и нельзя передавать файлы через аякс. Я уточнил, что можно, но нельзя аяксово сабмитить формы с файлами. И дополнил ответ решением по передаче файлов через аякс независимо от формы. 3 сен 2016 в 12:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.