PHP文件上传实践指南：确保安全与提高用户体验

1. 文件上传基础：

PHP提供了$_FILES全局变量来处理文件上传。以下是一个简单的文件上传表单和PHP处理代码：

HTML文件上传表单：

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传文件">
</form>

PHP文件上传处理（upload.php）：

<?php
if ($_FILES["file"]["error"] == 0) {
    $targetDir = "uploads/";
    $targetFile = $targetDir . basename($_FILES["file"]["name"]);

    // 移动上传的文件到目标目录
    move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile);

    echo "文件上传成功！";
} else {
    echo "文件上传失败，错误代码：" . $_FILES["file"]["error"];
}
?>

2. 文件类型和大小限制：

为了增加安全性，可以对上传的文件进行类型和大小的限制。以下是一个例子，只允许上传JPEG和PNG格式的图片文件，并限制文件大小为2MB：

<?php
$allowedTypes = array("image/jpeg", "image/png");
$maxFileSize = 2 * 1024 * 1024; // 2MB

if (in_array($_FILES["file"]["type"], $allowedTypes) && $_FILES["file"]["size"] <= $maxFileSize) {
    // 文件上传处理
    // ...
} else {
    echo "不允许上传此类型或文件大小超过限制！";
}
?>

3. 文件重命名与防止覆盖：

防止文件名冲突和覆盖是文件上传中的一个重要问题。以下是一个例子，使用唯一的文件名来确保文件不会被覆盖：

<?php
$targetDir = "uploads/";
$extension = pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
$newFileName = uniqid() . "." . $extension;

$targetFile = $targetDir . $newFileName;

// 移动上传的文件到目标目录
move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile);

echo "文件上传成功！新文件名：" . $newFileName;
?>

4. 文件上传进度条与用户体验：

为提高用户体验，可以使用JavaScript和Ajax实现文件上传进度条。以下是一个简单的例子，使用jQuery和HTML5的FormData：

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传文件">
</form>

<div id="progressBar"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $("#uploadForm").submit(function (e) {
        e.preventDefault();

        var formData = new FormData(this);

        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                var xhr = new XMLHttpRequest();

                // 监听上传进度
                xhr.upload.addEventListener("progress", function (event) {
                    if (event.lengthComputable) {
                        var percent = Math.round((event.loaded / event.total) * 100);
                        $("#progressBar").text(percent + "%").css("width", percent + "%");
                    }
                }, false);

                return xhr;
            },
            success: function (response) {
                console.log(response);
            }
        });
    });
</script>