Как доработать функцию отправки формы ajax для отправки файлов?

Question

[Павел]

$("form.megaForm").submit(function () { 
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php", 
            processData: false,
            contentType: false,
            data: th.serialize(),
        }).done(function () {
            alert('выполенно');
        });
        return false;
    });

есть у меня такая вот заготовочка и с помощью ее я могу почти как угодно извращаться , но сала задача отправить файл , нагуглил что надо делать такую вещь
var data = new FormData();
но как ее применить к моему коду ? Я правильно понимаю что надо добавить как то в мой код вот сюда
data: th.serialize() или как то склеить мой th.serialize() и new FormData() ?

Answer 1

[Максим Петелин]

Я примерно так делал, работает в IE9 в отличие от форм даты.

<form action='SaveFile'
		target="fileIframe"
		encType="multipart/form-data"
		method="post"
		role="document"
		id="file_upload_form">

	<iframe name="fileIframe"
			tabIndex="-1"
			id="fileIframe">
	</iframe>

	<input id="FileInput"
			name="upload"
			type="file"
			title="Выберите файл"
			onChange="document.getElementById('file_upload_form').submit()" />
	</form>

Comments

[Павел]

а что за action='SaveFile' ? С моим кодом это как то все подружится?

[Максим Петелин]

Метод на сервере который принимает файл. в вашем случае скрипт php

[Максим Петелин]

https://www.w3schools.com/php/php_file_upload.asp

[Павел]

Максим Петелин: и что я тут должен найти? Это не ajax

[Максим Петелин]

Там есть пример получения файла на php, а мой пример, приведенный выше без перезагрузки страницы отправляет и данные формы и файл на сервер.

Answer 2

[Abcdefgk]

Кодировка FormData существует в природе для отправки на сервер "мультиформы", т.е. формы, в которой присутствуют и текстовые и бинарные данные (и поля, и файл). Для отправки только файла его вообще кодировать не надо (чего кодировать-то, поток единиц и нулей?). Едиственно что надо - отправить загодя на сервер его расширение, чтобы там к случайному имени для потока его прикрутить при сохранении.

Comments

[Павел]

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

[Abcdefgk]

Да просто. Передать всю форму в аргумент -

var formData = new FormData(document.forms.anyform);

- и отдать эту переменную в пункт data: formData.
Да, и contentType указать - multipart/form-data
Всего делов.

Но вообще, такой запрос нельзя на сервере проверить на "межсайтовую атаку" - на сервере тело запроса нужно декодировать, а до этого отправленный с формой токен не виден (ну или я не знаю, как это сделать). Поэтому лучше разделять.
Хотя лично я - если сильно хочется, чтобы и то, и другое отправлялось нажатием одной кнопки - отправлял как-то файл по WebSocket параллельно форме (тег <input type="file" не вписан внутрь тега <form>), но это долго объяснять.

[Павел]

Abcdefgk: а в php какие нибудь танцы с бубном для new FormData нужны?
у меня сейчас такой обработчик

<?php

$frm_name  = "Youname";
$recepient = "[e-mail]";
$sitename  = "Название Сайта";
$subject   = "Новая заявка с сайта \"$sitename\"";

$cena = trim($_POST["cena"]);
$file = trim($_POST["file"]);
$email = trim($_POST["email"]);
$text = trim($_POST["text"]);
$radio2 = trim($_POST["radio2"]);


$message = '$subject <br>';
if (!empty($cena)) {
    $message .= "Имя: $cena <br>";
}
if (!empty($file)) {
    $message .= "Телефон: $file <br>";
}
if (!empty($email)) {
    $message .= "E-mail: $email <br>";
}
if (!empty($radio1)) {
    $message .= "Сообщение: $text <br>";
}
if (!empty($radio2)) {
    $message .= "Срок действия: $radio2 <br>";
}



// или
// $message = "
// Имя: $name <br>
// Удобная дата: $data $selecTime
// Удобное время для звонка: $selectbasic <br>
// Телефон: $phone <br>
// E-mail: $email <br>
// Сообщение: $comments <br>
// С какой кнопки пришла форма: $otkuda
// ";



mail($recepient, $subject, $message, "From: $frm_name <$email>" . "\r\n" . "Reply-To: $email" . "\r\n" . "X-Mailer: PHP/" . phpversion() . "\r\n" . "Content-type: text/html; charset=\"utf-8\"");
?>

[Abcdefgk]

mrusklon: Тут я не знаю, я на Node.js пишу для сервера. Но "танцы с бубном" непременно нужны - данные же идут в закодированном виде, их нужно декодировать - с помощью какого-нибудь бубна. Я не знаю, как это делается в PHP, но результат наверняка какой-то такой же - тело запроса как раз и разделяется на files и fields, файл записывается в temp под случайным именем и отдаётся его первоначальное имя и случайное имя и путь до него сейчас.
Короче, это вы отдельный вопрос мастерам этого фантастического языка задайте.

[Павел]

Abcdefgk: наверно поищу что то готовое , что то для такой мелкой задачи много сил придется потратить чувствую

[Abcdefgk]

Да конечно, есть какая-то готовая штука.

Answer 3

[M-ka]

необходимо не танцевать с бубном, вокруг аякс запроса, а взять готовое решение по отправке картинок с обратной связью... у меня обертка самописная вокруг обычного жк аякс, которой пользуюсь для всего и вся... и к ней так же прикрутил и отправку файлов по аяксу (взяв готовое, подправил у себя апи для работы инородного и все)

Comments

[Павел]

я что то не найду нормального , везде то через 3-4 раза на почту только приходит , а кое где вообще не работает , может поделитесь?

[M-ka]

mrusklon: а это проблема сервера, что на почту не приходит... а не клиента.... Проблема в бакэнде или проблема в настройках самого сервера и он блочится почтовиками из-за не оч корректных настроек отправки почты.

а добавить трекалку, которая бы хранила количество отправленых юзером файлов + инфу о количестве полученых файлов + инфу о количестве отправленых меседжей с ними + инфу о количестве полученых меседжей, не такая уж проблема.... было бы только желание!

[Павел]

M-ka: так и скажите , желания делится нет.

[M-ka]

mrusklon: а при чем желание делиться, готовые решения отправки файлов с обратной связью гуглятся за 5 минут... и прикручиваются к клиентской стороне не должно составить проблем(с выкиданием чужого кода и правками для работы с собственным апи обертки аякса). А если это вызывает проблему, значит нужно переделывать архитектуру всей клиентской стороны, что бы она была легко исправляемой и не вызывала каких либо проблем... Да и то, что написано, это просто трындец... не больше и не меньше. Следовало бы почитать разные книги по яваскрипту, по работе с патернами и тд... тогда бы не возникало подобных проблем.