【PHP & JavaScript】Ajax版ファイルアップロードフォーム

points and lines.jp owner

3年前

1 Ajaxによるファイルアップロード
- 1.1 🔰Ajaxとは
- 1.2 SAMPLE

Ajaxによるファイルアップロード

PHPのファイルアップロードフォームをAjaxによる非同期処理で実装します。

環境 : PHP 7.4, jQuery 3.3.1

🔰Ajaxとは

ブラウザを再読み込み（同期処理）をすることなく、クライアント側からJavaScriptを使って直接サーバサイドプログラムとデータの通信する仕組みのこと。

SAMPLE

JavaScript

ajax.js　※ Ajaxの処理はjQueryのajax関数を使用しています。

$(function () {
    function uploadFile(file) {

        const form_data = new FormData();

        form_data.append("file", file);

        $.ajax({
            url: '',
            type: 'POST',
            data: form_data,
            processData: false, // dataをクエリ文字列に変換しない
            contentType: false, // リクエストのContent-Typeを指定しない
        }).done(function (response) {
            if (response.success) {
                $("p.message").removeClass("error");
                $(".message").text('アップロードに成功しました。');
            } else {
                $(".message").text('アップロードに失敗しました。');
                $("p.message").addClass("error");
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            $(".message").text('通信に失敗しました。');
            $("p.message").addClass("error");
        })

    }

    $("#upload_form").submit(function () {
        
        $(".message").text('');
        
        const file = document.getElementById('file').files[0];

        if (file === undefined) {
            alert('ファイルが選択されていません');
        } else {
            uploadFile(file);
            document.getElementById('file').value = "";
        }

        return false;

    });
});

フォーム
index.php

<?php

define('FILES_DIR', __DIR__ . '/resources/');
require_once __DIR__ . '/../data_store.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    if (empty($_FILES['file']['tmp_name']) || empty($_FILES['file']['name'])) {
        exit;
    }

    list($origin_name, $file_type) = explode('.', $_FILES['file']['name']);

    $filename = bin2hex(openssl_random_pseudo_bytes(16)) . '_' . $origin_name . '.' . $file_type;

    sleep(1);

    $upload_success = move_uploaded_file($_FILES['file']['tmp_name'], FILES_DIR . $filename);
    
    if ($upload_success) {
        $success = true;
    }

    $response = ['success' => $success];

    header('content-Type: application/json');
    echo json_encode($response);
    exit;
}

?>
<html>

<head>
    <title>PHP SAMPLE</title>
    <script src="/resources/js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <style>
        .error {color: #F00;}
    </style>
    <script src="/resources/js/ajax.js"></script>
    <main>
        <h1>ajax file upload sample</h1>
        <p class="message"></p>
        <form id="upload_form" method="POST">
            <label for="file">ファイル: </label>
            <input id="file" type="file" name="file">
            <button type="submit">アップロード実行</button>
        </form>
    </main>
</body>

</html>

AjaxのURL送信先を空または属性なしとすることで、送信先を自身（index.php）としています。
非同期でのPOST送信後、サーバーサイド（PHP）の処理結果をクライアントへJSON形式で返却します。

※ sleep関数による待機処理は非同期処理を体感するために加えています。
（実際は不要）

Follow me!