Обратите внимание, что новости можно получать по RSS.
X
-

Информационные технологии, LiveJournal cr_it - архив

18 ноября 2013, 03:23 (1621 день назад, №8832)Одновременная загрузка файлов и данных формы через Ajax

ScreenshotПонадобилось сделать достаточно очевидную, казалось бы, вещь - страничку, на которой можно заполнить несколько полей формы, выбрать несколько файлов и при нажатии на кнопку чтобы всё это вместе отправлялось на сервер без перезагрузки страницы (через ajax).

Оказалось, что есть ряд ньюансов. По отдельности нет проблем, а чтобы всё вместе - начинаются сложности. В итоге всё заработало, так что предлагаю простой пример. После успешной загрузки сервер возвращает содержимое массивов _POST и _FILES, которое выводится на ту же страницу.

Проверял в Windows версиях FF, Chrome, IE, Opera, а также в Android Chrome и старом Android Browser.  Под IOS не проверял - нет под рукой.

Не работает в Safari 5.34/Win. Причина непонятна (симптомы - отправляет файлы нулевой длины).

Не будет работать в IE <9.

Код клиента (javascript):

<!DOCTYPE html>
<html>
<head>
<title>Ajax file and form data upload test by Frog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

$('#cform').bind('submit', function(event)
{
    event.preventDefault();
    console.log('SUBMIT!');

    var formData = new FormData();

    $.each($("#cform_file")[0].files, function(i, file)
    {
        formData.append('file-'+i, file);
    });

    formData.append('name',$("#cform_name").val());
    formData.append('email',$("#cform_email").val());

    $.ajax({
            url: 'aftest.php',
            type: 'POST',
            contentType: false,
            processData: false,
            cache: false,
            headers: { 'cache-control': 'no-cache' }, // fix for IOS6 (not tested)
            dataType: 'json',
            data: formData,
            timeout: 7000,

            beforeSend: function(x)
            {
                console.log('beforeSend');
            },//beforeSend

            success: function( data )
            {
                console.log('success',data);

                if (data != null)
                {
                   $('#result').prepend(data._FILES);
                   $('#result').prepend(data._POST);
                }//if
                else
                {
                    console.log('success, but no data');
                }//else
            },//success

            error: function( data )
            {
               console.log('error');
            },//error

            complete: function( data )
            {
                console.log('complete');
            }//complete
    });//ajax()

})//submit()

});//.ready

</script>
</head>

<body>

<form id="cform" action="index.php" method="POST" enctype = "multipart/form-data">

Name: <input id="cform_name" name="cform_name" type="text" size="30" maxlength="30" /><br/>
E-Mail: <input id="cform_email" name="cform_email" type="text" size="30" maxlength="30" /><br/>

<input type="hidden" value="2000000" name="MAX_FILE_SIZE">
<input id="cform_file" type="file" size="20" name="cform_file[]" multiple=""><br/>
<!--
for single file upload replace with:
<input id="cform_file" type="file" size="20" name="cform_file">
-->
<br/>
<input id="cform_submit" name="cform_submit" type="submit" value="SEND" ><br/>

</form>

<hr>

<div id="result"></div>

</body>
</html>

Код сервера (php):

foreach($_FILES as $file)
{
    move_uploaded_file($file["tmp_name"], $file["name"]);
}//foreach

echo json_encode(  Array("_POST"=>'_POST ' . nl2br(print_r($_POST,true)), "_FILES"=>'_FILES ' . nl2br(print_r($_FILES,true)))  );

Опубликовано: Пётр Соболев

Случайная заметка

7046 дней назад, 00:0011 января 1999 (Андрей Винокуров, 11/Янв/99) < К оглавлению В предыдущих выпусках мы с вами выяснили некоторые подробности относительно шифров: что существуют абсолютно стойкие, так называемые совершенные шифры, которые невозможно раскрыть в принципе; что цена этой стойкости - необходимость использовать ключевую ...далее

Избранное

357 дней назад, 01:575 мая 2017 Часть 1: От четырёх до восьми Я люблю читать воспоминания людей, заставших первые шаги вычислительной техники в их стране. В них всегда есть какая-то романтика, причём какого она рода — сильно зависит от того, с каких компьютеров люди начали. Обычно это определяется обстоятельствами — местом работы, учёбы, а иногда и вовсе — ...далее

1862 дня назад, 00:5922 марта 2013 Прочёл тут книжку - iWoz ( ссылка ) , 2006 года. Это автобиография Стива Возняка. Похоже, что на русский её не переводили (в отличие от книг про Стива Джобса). В этой парочке, как известно, Возняк был инженером (собственно, и спроектировавшим Apple I и II), а Джобс - скорее предпринимателем. В книге есть довольно интересные ...далее

966 дней назад, 23:404 сентября 2015 Небольшое видео про CC'2015 ( версия без фоновой музыки здесь: ссылка )

1334 дня назад, 03:121 сентября 2014 Мой семинар на Chaos Constructions'2014 (слайды можно в виде PDF скачать здесь: ссылка ) и несколько интервью с разными людьми: Вячеслав Славинский (svo) о Vectrex: ссылка Вячеслав Славинский (svo) о 3D Imager для Vectrex: ссылка Вячеслав Славинский (svo) о световом пере для Vectrex: ссылка ...далее