js如何调用php文件上传

JavaScript 与 PHP 无缝协作：实现前端调用后端文件上传功能**

在Web开发中,文件上传是一项非常常见且重要的功能，我们需要在前端（用户界面）收集用户选择的文件，然后将这些文件安全地传输到后端服务器进行处理和存储，JavaScript（JS）作为前端开发的核心语言，负责与用户交互并收集数据；而PHP作为流行的后端脚本语言，则负责接收、验证和处理上传的文件，本文将详细介绍如何通过JavaScript调用PHP文件上传功能，实现从前端到后端的数据流转。

基本原理

JS调用PHP文件上传的基本原理是利用HTTP协议进行数据传输,主要有两种方式：

传统的表单提交（Form Submission）：这是最传统的方式，通过HTML的<form>标签，设置method="post"和enctype="multipart/form-data"属性，然后通过<input type="file">让用户选择文件，最后点击提交按钮将表单数据（包括文件）发送到PHP脚本，这种方式会导致页面刷新或跳转。
AJAX（Asynchronous JavaScript and XML）提交：这是目前更常用、用户体验更好的方式，JavaScript通过XMLHttpRequest对象或更现代的Fetch API，在不刷新整个页面的情况下，将文件数据异步发送到PHP服务器，服务器处理完成后，可以返回响应数据，前端再根据响应更新页面内容。

我们将重点介绍更灵活、用户体验更佳的AJAX方式。

准备工作：PHP后端处理文件上传

在讨论JS如何调用之前,我们先需要一个简单的PHP脚本来接收和处理上传的文件，假设我们有一个名为upload.php的文件，其内容如下：

<?php
// 检查是否有文件上传
if (isset($_FILES['uploaded_file']) && $_FILES['uploaded_file']['error'] === UPLOAD_ERR_OK) {
    // 获取文件信息
    $fileTmpPath = $_FILES['uploaded_file']['tmp_name'];
    $fileName = $_FILES['uploaded_file']['name'];
    $fileSize = $_FILES['uploaded_file']['size'];
    $fileType = $_FILES['uploaded_file']['type'];
    $fileNameCmps = explode(".", $fileName);
    $fileExtension = strtolower(end($fileNameCmps));
    // 定义上传目录（确保该目录存在且可写）
    $uploadDir = 'uploads/';
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }
    // 生成唯一的文件名以避免覆盖
    $newFileName = md5(time() . $fileName) . '.' . $fileExtension;
    $destPath = $uploadDir . $newFileName;
    // 允许的文件扩展名
    $allowedFileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'doc', 'docx'];
    // 验证文件扩展名
    if (in_array($fileExtension, $allowedFileExtensions)) {
        // 将文件从临时目录移动到上传目录
        if (move_uploaded_file($fileTmpPath, $destPath)) {
            echo json_encode([
                'success' => true,
                'message' => '文件上传成功！',
                'file_path' => $destPath,
                'file_name' => $newFileName
            ]);
        } else {
            echo json_encode([
                'success' => false,
                'message' => '文件移动失败！'
            ]);
        }
    } else {
        echo json_encode([
            'success' => false,
            'message' => '不允许的文件类型！'
        ]);
    }
} else {
    // 检查上传错误
    $errorMessage = '上传错误: ';
    switch ($_FILES['uploaded_file']['error']) {
        case UPLOAD_ERR_INI_SIZE:
            $errorMessage .= '文件大小超过了php.ini中的upload_max_file_size指令。';
            break;
        case UPLOAD_ERR_FORM_SIZE:
            $errorMessage .= '文件大小超过了表单中指定的MAX_FILE_SIZE。';
            break;
        case UPLOAD_ERR_PARTIAL:
            $errorMessage .= '文件只有部分被上传。';
            break;
        case UPLOAD_ERR_NO_FILE:
            $errorMessage .= '没有文件被上传。';
            break;
        default:
            $errorMessage .= '未知上传错误。';
            break;
    }
    echo json_encode([
        'success' => false,
        'message' => $errorMessage
    ]);
}
?>

PHP脚本说明：

$_FILES 是PHP中用于处理上传文件的超全局数组。
uploaded_file 是我们在前端JS中指定的文件字段的name属性。
UPLOAD_ERR_OK 表示上传成功。
move_uploaded_file() 函数将上传的文件从临时目录移动到指定目录。
我们进行了简单的文件类型验证和错误处理。
最终返回一个JSON格式的响应,方便前端处理。

JavaScript前端实现AJAX文件上传

我们来看如何用JS来调用上述的upload.php，我们将使用FormData对象来构建包含文件的数据，并通过Fetch API发送请求。

假设我们有一个HTML文件,包含一个文件输入框和一个上传按钮：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JS调用PHP文件上传</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
        input[type="file"] { margin-bottom: 10px; }
        button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
        #result { margin-top: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 3px; display: none; }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <div class="container">
        <h2>文件上传示例</h2>
        <input type="file" id="fileInput" name="uploaded_file">
        <button id="uploadBtn">上传文件</button>
        <div id="result"></div>
    </div>
    <script>
        document.getElementById('uploadBtn').addEventListener('click', function() {
            const fileInput = document.getElementById('fileInput');
            const resultDiv = document.getElementById('result');
            // 检查是否选择了文件
            if (fileInput.files.length === 0) {
                showResult('请先选择一个文件！', false);
                return;
            }
            const file = fileInput.files[0];
            // 创建FormData对象
            const formData = new FormData();
            // 将文件添加到FormData中，'uploaded_file'必须与PHP中$_FILES['uploaded_file']的键名一致
            formData.append('uploaded_file', file);
            // 显示上传中提示（可选）
            showResult('正在上传...', false);
            // 使用Fetch API发送请求
            fetch('upload.php', {
                method: 'POST',
                body: formData
                // 注意：使用FormData时，Fetch API会自动设置正确的Content-Type（multipart/form-data），
                // 所以不需要手动设置headers。
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json(); // 解析JSON响应
            })
            .then(data => {
                // 根据PHP返回的数据显示结果
                if (data.success) {
                    showResult(`上传成功！文件路径：${data.file_path}`, true);
                } else {
                    showResult(`上传失败：${data.message}`, false);
                }
            })
            .catch(error => {
                console.error('上传错误:', error);
                showResult(`上传过程中发生错误：${error.message}`, false);
            });
        });
        function showResult(message, isSuccess) {
            const resultDiv = document.getElementById('result');
            resultDiv.textContent = message;
            resultDiv.style.display = 'block';
            resultDiv.className = isSuccess ? 'success' : 'error';
        }
    </script>
</body>
</html>

JS代码说明：

获取元素：获取文件输入框和按钮的DOM元素。
检查文件：确保用户选择了文件。
FormData对象：FormData是HTML5中用于构建表单数据的对象，特别适合用于文件上传，我们使用append()方法将文件添加到其中，第一个参数'uploaded_file'**必须与PHP脚本中$_FILES`的键名一致**。
**Fetch