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

Загрузка файлов на сервер с помощью 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

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий