task_dragdrop.php

このページはソースコードを表示するためのものです。PHPスクリプトは実行されません。
<?php
// task_dragdrop.php: Drag & Drop + Ajaxによる課題提出画面
session_start();
require_once __DIR__ . '/common/common.php';
$member = login_check();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>課題提出（Drag & Drop版）</title>
<style>
.drop-zone {
    border: 3px dashed #0d6efd;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
}
.drop-zone.dragover {
    background: #e7f1ff;
    border-color: #084298;
}
#message { margin-top: 1rem; }
</style>
</head>
<body>
<h1>課題提出（Drag & Drop版）</h1>

<form id="upload_form">
    <p>課題名：<input type="text" name="name" id="name" required></p>
    <p>コメント：<br>
        <textarea name="word" id="word" rows="5" cols="50"></textarea>
    </p>

    <div id="drop_zone" class="drop-zone">
        ここに pdf, zip, txt ファイルをドラッグ＆ドロップしてください。<br>
        またはクリックしてファイルを選択してください。<br>
        <small>最大サイズ: 5 MB</small>
    </div>

    <input type="file" id="task_file" name="task_file" accept=".pdf,.zip,.txt" hidden>
    <p id="file_info"></p>
    <p><button type="submit">ファイル送信</button></p>
</form>

<div id="message"></div>

<script>
const dropZone = document.getElementById('drop_zone');
const fileInput = document.getElementById('task_file');
const fileInfo = document.getElementById('file_info');
const message = document.getElementById('message');
const form = document.getElementById('upload_form');
let selectedFile = null;

function showFile(file) {
    const allowedExt = ['pdf', 'zip', 'txt'];
    const maxSize = 5 * 1024 * 1024;
    const ext = file.name.split('.').pop().toLowerCase();

    if (!allowedExt.includes(ext)) {
        selectedFile = null;
        fileInfo.textContent = '';
        alert('アップロードできるファイルは pdf, zip, txt のみです。');
        return;
    }

    if (file.size > maxSize) {
        selectedFile = null;
        fileInfo.textContent = '';
        alert('ファイルサイズは5MB以下にしてください。');
        return;
    }

    selectedFile = file;
    fileInfo.textContent = `${file.name} (${file.size} bytes)`;
}

dropZone.addEventListener('click', () => fileInput.click());

fileInput.addEventListener('change', () => {
    if (fileInput.files.length > 0) {
        showFile(fileInput.files[0]);
    }
});

['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, event => {
        event.preventDefault();
        event.stopPropagation();
        dropZone.classList.add('dragover');
    });
});

['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, event => {
        event.preventDefault();
        event.stopPropagation();
        dropZone.classList.remove('dragover');
    });
});

dropZone.addEventListener('drop', event => {
    const files = event.dataTransfer.files;
    if (files.length > 0) {
        showFile(files[0]);
    }
});

form.addEventListener('submit', async event => {
    event.preventDefault();

    if (!selectedFile) {
        alert('提出するファイルを選択してください。');
        return;
    }

    const formData = new FormData();
    formData.append('name', document.getElementById('name').value);
    formData.append('word', document.getElementById('word').value);
    formData.append('task_file', selectedFile);

    message.textContent = 'アップロード中です...';

    try {
        const response = await fetch('task_ajax_upload.php', {
            method: 'POST',
            body: formData
        });

        const result = await response.json();

        if (result.ok) {
            message.textContent = result.message;
            form.reset();
            selectedFile = null;
            fileInfo.textContent = '';
        } else {
            message.textContent = result.message;
        }
    } catch (error) {
        message.textContent = '通信エラーが発生しました。';
    }
});
</script>
</body>
</html>