<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Загрузка файлов на сервер с помощью JavaScript

Загрузка файлов на сервер с помощью JavaScript

Доброго времени суток! В данном примере я покажу Вам как можно загрузить файл на сервер с помощью JavaScript без перезагрузки страницы. Т.е. это так называемая AJAX загрузка.

Файл index.html (браузерная часть)


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Ajax File Upload</title>
</head>

<body>
    <div id="example">
        <form enctype="multipart/form-data" action="http://localhost:8080/upload" method="post">
            <input name="profileImage" type="file">
            <button type="submit">Сохранить!</button>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            document
                .querySelector('button[type=submit]')
                .addEventListener('click', function(event) {

                event.preventDefault();

                // получаем элемент формы
                const form = this.form;
                // создаем объект данных формы
                const data = new FormData(form);
                // получаем url-адрес на которые будем отправлять запрос
                const url = form.action;

                // отправляем запрос
                fetch(url, {
                    method: 'POST',
                    // headers: {
                    //     'Content-Type': 'multipart/form-data'
                    // },
                    body: data,
                })
                .then(res => res.json())
                .then(data => console.log(data.message));
            });
        });

    </script>
</body>

</html>

Файл upload.php (серверная часть)


<?php

const FILES_STORAGE_PATH = './uploaded';

interface HttpMethod
{
    public const GET = 'GET';
    public const POST = 'POST';
}


function response(mixed $data)
{
    return json_encode($data, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
}

function ok(array $data)
{
    return response(array_merge(['code' => 200], $data));
}

function error(string $message)
{
    return response(['code' => 500, 'message' => $message]);
}

function notfound()
{
    return response(['code' => 404, 'message' => 'Not found']);
}

function main()
{
    $httpPath = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
    $httpMethod = $_SERVER['REQUEST_METHOD'];
    $allowedExtensions = ['txt', 'pdf', 'png', 'jpg'];

    header('Access-Control-Allow-Origin: *');
    header('Content-Type: appplication/json');


    if (HttpMethod::POST === $httpMethod) {
        if ('/upload' === $httpPath) {


            if (isset($_FILES['profileImage'])) 
            {
                $tmpName = $_FILES['profileImage']['tmp_name'];
                $clientName = $_FILES['profileImage']['name'];
                $extension = pathinfo($clientName, PATHINFO_EXTENSION);
                $serverName = sprintf("%s/%s.%s", FILES_STORAGE_PATH, md5($clientName), $extension);
                $uploadErrorCode = $_FILES['profileImage']['error'];

                if(!in_array($extension, $allowedExtensions, 1)) {
                    return error('Extension not allowed');
                }

                if(move_uploaded_file($tmpName, $serverName))
                {
                    return ok(['message' => 'File uploaded', 'filename' => $serverName]);
                }
                else if($uploadErrorCode > 0)
                {
                    $fileUploadErrorsMap = [
                        UPLOAD_ERR_INI_SIZE => 'The file exceeds the upload_max_filesize setting in php.ini.',
                        UPLOAD_ERR_FORM_SIZE => 'The file exceeds the MAX_FILE_SIZE setting in the HTML form.',
                        UPLOAD_ERR_PARTIAL => 'The file was only partially uploaded.',
                        UPLOAD_ERR_NO_FILE => 'No file was uploaded.',
                        UPLOAD_ERR_NO_TMP_DIR => 'No temporary folder was available.',
                        UPLOAD_ERR_CANT_WRITE => 'Unable to write to the disk.',
                        UPLOAD_ERR_EXTENSION => 'File upload stopped.'
                    ];

                    $errorMessage = $fileUploadErrorsMap[$uploadErrorCode] ?: 'A system error occurred.';

                    return error($errorMessage);
                }

            } else {
                return error('No file param');
            }

        } else {
            return notfound();
        }
    }

    if (HttpMethod::GET === $httpMethod) {
        return response(['code' => 200, 'message' => 'No data']);
    }
}


print main();


Таким образом, можно загрузить файл на сервер с помощью технологии AJAX и PHP

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.