【原创】一个简单的文件上传生成超链接程序-EkkoBlog

上传完成后自动重命名并且在前端输出超链接和复制按钮

前端代码（index.html）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2 class="mb-3">上传文件</h2>
        <form id="uploadForm" method="post" enctype="multipart/form-data">
            <div class="mb-3">
                <label for="file" class="form-label">请选择要上传的文件：</label>
                <input type="file" class="form-control" id="file" name="file" required>
            </div>
            <button type="submit" class="btn btn-primary">上传文件</button>
        </form>
        <div id="result" class="mt-3"></div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            fetch('upload.php', {
                method: 'POST',
                body: formData,
            })
            .then(response => response.text())
            .then(html => {
                document.getElementById('result').innerHTML = html;
            })
            .catch(error => {
                console.error('上传失败:', error);
                document.getElementById('result').innerHTML = '<p style="color: red;">上传失败</p>';
            });
        });
    </script>
</body>
</html>

后端代码（upload.php）：

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['file'])) {
    $errors = array();
    $file_name = $_FILES['file']['name'];
    $file_size = $_FILES['file']['size'];
    $file_tmp = $_FILES['file']['tmp_name'];
    $file_ext = strtolower(end(explode('.', $file_name)));
    
    $extensions = array("jpeg", "jpg", "png", "gif", "txt", "pdf", "doc", "docx");
    
    if (!in_array($file_ext, $extensions)) {
        echo "只允许上传 JPEG, PNG, GIF, TXT, PDF, DOC 或 DOCX 格式的文件。";
        return;
    }
    
    if ($file_size > 2097152) {
        echo '文件大小必须刚好为 2 MB。';
        return;
    }
    
    $upload_dir = $_SERVER['DOCUMENT_ROOT'] . "/src/";
    if (!is_dir($upload_dir)) {
        mkdir($upload_dir, 0755, true);
    }

    $new_filename = uniqid() . '.' . $file_ext;
    $upload_path = $upload_dir . basename($new_filename);
    
    if (move_uploaded_file($file_tmp, $upload_path)) {
        $full_link = "https://" . $_SERVER['HTTP_HOST'] . "/src/" . $new_filename;
        echo "<p>上传成功。</p>";
        echo "<p>这是您的文件链接： <a href='$full_link'>$full_link</a></p>";
        echo "<button class='btn btn-primary' onclick=\"navigator.clipboard.writeText('$full_link')\">复制链接</button>";
    } else {
        echo "文件上传失败。";
    }
} else {
    echo "非法访问。";
}
?>

文章版权归作者所有，未经允许请勿转载。

THE END

学习小记折腾记录
# html # php

【原创】一个简单的文件上传生成超链接程序

请登录后发表评论