Загрузка аватара пользователя через Ajax

  • Vadim Tsukanov
    Разработчик
  • Дата публикации
    25.11.2020
  • Категория
    1С-Битрикс
авартка в битрикс
Задача:Загружать/менять изображение, загруженное через ajax. В данном случае - аватар пользователя

Аватарки пользователя — маленькая мелочь, без которой трудно представить современный сайт. Сейчас посмотрим, как оперировать ими в 1с Битрикс

Итак, погнали. Есть форма

<form action="updatePersonalInfo.php"  id="update-user-info" enctype="multipart/form-data">
    <input type="hidden" name="old-photo-id" value="<?php echo $arUser['PERSONAL_PHOTO']?>">
    <label class="avatar">
        <span class="image">
            <?php
                if(!empty($arUser['PERSONAL_PHOTO'])){
                    $avatarSrc = CFile::GetPath($arUser['PERSONAL_PHOTO']);
                    echo '<img src="'.$avatarSrc.'">';
                }else{
                    echo '<img src="'.SITE_TEMPLATE_PATH.'/img/user.jpg">';
                }
            ?>
        </span>
        <input type="file" id="image-browse" name="personal-photo">
        <span class="change">Изменить</span>
    </label>
</form>

Конечно, сама форма намного больше, но нас интересует только эта часть.

Код JS выглядит след образом:

    $('#update-user-info').on('submit', function(event) {
        event.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            cache:false,
            dataType: 'json',
            data: formData,
            processData: false,
            contentType: false,
            enctype: 'multipart/form-data',
            success: function(result) {
                console.log(result.status);
                if(result.status == 'success'){
                    window.location.reload();
                }
            }
        });
    });

    $("#image-browse").on("change", function() {
        $("#update-user-info").submit();
    });

Это все мы отправляем на файлик обработчик:

$oUser = new CUser;

$arFields = array(
    "UF_NOTIFICATIONS" => $notification,
    "UF_SUBSCRIPTION" => $subscription,
);

if(!empty($_FILES["personal-photo"]['name']))
{
    $fileId = CFile::SaveFile($_FILES["personal-photo"],'avatar');
    $arFile = CFile::MakeFileArray ($fileId);
    $arFile['del'] = "Y";
    $arFile['old_file'] = $_POST['old-photo-id'];
    $arFields['PERSONAL_PHOTO'] = $arFile;
}

$result = $oUser->Update($_POST['user-id'], $arFields);

if($result){
    $result = array(
        'status' => 'success',
        'msg' => 'Profile updated'
    );
}
echo json_encode($result);

Вот так, когда есть понимание, а еще лучше — такая шпаргалка, можно сэкономить порядка 2х-3х часов. Я же оставлю это просто тут, чтобы просто обращаться к этому в следующий раз.

4 Комментариев
  • muzanaka
    2024-05-30 11:18:59

    не за что)

  • Андрей
    2024-05-27 21:25:06

    Спасибо друг что выложил, пригодилось!

  • muzanaka
    2023-12-05 09:11:12

    не за что)

  • Mark
    2023-12-01 22:50:29

    Спасибо за пример кода. Это действительно сэкономило мне около 2 часов работы

Оформить заказ в Devstages