实现文件上传后自动填充URL及重命名，适配Google Forms替代方案

一、修改后端PHP上传脚本 #

调整脚本以支持自定义文件名，并返回文件的完整访问URL：

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

// 获取自定义文件名，为空则使用原文件名
$customFilename = isset($_POST['filename']) ? trim($_POST['filename']) : '';
$originalFilename = $_FILES['file']['name'];
$fileExt = pathinfo($originalFilename, PATHINFO_EXTENSION);

// 过滤自定义文件名的非法字符，避免安全风险
if (!empty($customFilename)) {
    $customFilename = preg_replace('/[^\w\-\.]/', '', $customFilename);
    $filename = $customFilename . '.' . $fileExt;
} else {
    $filename = $originalFilename;
}

$uploadDir = 'uploads/';
// 自动创建上传目录（若不存在）
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

$location = $uploadDir . $filename;

// 执行文件上传并返回结果
if (move_uploaded_file($_FILES['file']['tmp_name'], $location)) {
    // 生成适配当前服务器的完整URL
    $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
    $domain = $_SERVER['HTTP_HOST'];
    $fileUrl = $protocol . '://' . $domain . '/' . str_replace('\\', '/', $location);
    
    echo json_encode([
        'status' => 'success',
        'url' => $fileUrl
    ]);
} else {
    echo json_encode([
        'status' => 'failure',
        'message' => '文件上传失败'
    ]);
}
?>

关键改动说明 #

• 新增接收前端传递的filename参数，支持自定义文件名
• 对自定义文件名做安全过滤，防止非法字符和路径遍历攻击
• 上传成功后返回JSON格式响应，包含文件完整URL
• 自动创建uploads目录，避免因目录缺失导致上传失败
• 动态生成适配HTTP/HTTPS的文件URL

二、修改前端表单脚本 #

调整表单结构和上传逻辑，实现自定义文件名传递与URL自动填充：

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>upload</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script>
    async function uploadFile() {
        const fileInput = document.getElementById('fileupload');
        const filenameInput = document.getElementById('custom-filename');
        const urlInput = document.getElementById('file-url');
        
        // 检查是否选择了文件
        if (!fileInput.files || fileInput.files.length === 0) {
            alert('请先选择要上传的文件');
            return;
        }
        
        let formData = new FormData();           
        formData.append("file", fileInput.files[0]);
        formData.append("filename", filenameInput.value); // 传递自定义文件名
        
        try {
            const response = await fetch('assets/php/upload.php', {
                method: "POST", 
                body: formData
            });    
            const result = await response.json();
            
            if (result.status === 'success') {
                urlInput.value = result.url; // 将URL填充到指定输入框
            } else {
                alert('上传失败：' + result.message);
            }
        } catch (error) {
            alert('上传请求出错：' + error.message);
        }
    }
    </script>

    <label>自定义文件名（不含后缀）</label><br>
    <input id="custom-filename" type="text" name="filename" placeholder="留空则使用原文件名"><br>
    <input id="fileupload" type="file" name="fileupload" onchange="uploadFile()"/><br>
    <label>文件URL</label><br>
    <input id="file-url" type="text" readonly placeholder="上传后自动填充URL"/>

</body>
</html>

关键改动说明 #

• 为所有输入框添加ID，方便JavaScript获取和操作
• 在FormData中加入自定义文件名参数，传递给后端
• 解析后端返回的JSON响应，将成功上传后的URL填充到指定输入框
• 增加基础错误处理：无文件选择、请求失败、上传失败的提示
• 给URL输入框设置readonly属性，防止用户手动修改

三、整体流程 #

1. 用户可在“自定义文件名”输入框填写名称（留空则使用原文件名）
2. 用户选择图片文件后，自动触发上传函数
3. 前端将文件和自定义文件名一起发送到PHP后端
4. 后端完成文件保存后，返回文件的完整访问URL
5. 前端将URL自动填充到指定输入框，供后续提交到Google Forms使用

内容的提问来源于stack exchange，提问作者Amr