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

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

18 ноября 2013, 03:23 (2209 дней назад, №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)))  );

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

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

7411 день назад, 17:3022 августа 1999 Вышел FAR 1.63bИз нового: 1. New command line option: -u <username> It allows to have separate settings for different users. 2. Shift-Enter key can be used in edit controls to insert a file name under cursor from the active panel. 3. When indenting in the internal editor FAR copies space characters from the previous line, if any, instead of inserting spaces as before. 4. New %%S variable in archive support plugin allows to specify place in the command line to insert optional switches. 5. Corrections in memory management in editor color API. This version should release all ...далее

Избранное

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

457 дней назад, 20:305 сентября 2018 "Finally, we come to the instruction we've all been waiting for – SEX!" / из статьи про микропроцессор CDP1802 / В начале 1970-х в США были весьма популярны простые электронные игры типа Pong (в СССР их аналоги появились в продаже через 5-10 лет). Как правило, такие игры не имели микропроцессора и памяти в современном понимании этих слов, а строились на жёсткой ...далее