如何使用jQuery实现最简方式的AJAX文件上传？

前端代码修改 #

给表单添加ID方便绑定事件，通过jQuery监听提交事件，用FormData封装表单数据发起AJAX请求：

<body>
   <form id="uploadForm" action="upload.php" method="POST" enctype="multipart/form-data">
      <input type="file" name="myfile" /><br>
      <input type="submit" name="submit_btn" value="Submit" />
   </form>
   <div id="result"></div>

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
      $(document).ready(function() {
         $('#uploadForm').submit(function(e) {
            // 阻止表单默认提交行为
            e.preventDefault();
            
            // 封装包含文件的表单数据
            var formData = new FormData(this);
            
            $.ajax({
               url: $(this).attr('action'),
               type: 'POST',
               data: formData,
               // 禁用jQuery对数据的自动处理，交给FormData处理
               processData: false,
               // 禁用自动设置Content-Type，浏览器会自动生成正确的multipart/form-data头
               contentType: false,
               success: function(response) {
                  $('#result').html(response);
               },
               error: function() {
                  $('#result').html('文件上传失败');
               }
            });
         });
      });
   </script>
</body>

后端PHP处理（upload.php） #

直接检查文件上传状态，完成文件存储逻辑：

<?php
if (isset($_FILES['myfile']) && $_FILES['myfile']['error'] === UPLOAD_ERR_OK) {
    $uploadDir = './uploads/';
    // 确保上传目录存在，不存在则创建
    if (!file_exists($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }
    
    $fileName = basename($_FILES['myfile']['name']);
    $targetPath = $uploadDir . $fileName;
    
    if (move_uploaded_file($_FILES['myfile']['tmp_name'], $targetPath)) {
        echo '文件上传成功：' . $targetPath;
    } else {
        echo '文件移动失败，请检查目录权限';
    }
} else {
    // 处理上传错误
    $errorMsg = '';
    switch ($_FILES['myfile']['error']) {
        case UPLOAD_ERR_INI_SIZE:
            $errorMsg = '文件超过php.ini限制的大小';
            break;
        case UPLOAD_ERR_FORM_SIZE:
            $errorMsg = '文件超过表单设置的大小限制';
            break;
        case UPLOAD_ERR_PARTIAL:
            $errorMsg = '文件仅完成部分上传';
            break;
        case UPLOAD_ERR_NO_FILE:
            $errorMsg = '未选择要上传的文件';
            break;
        default:
            $errorMsg = '发生未知上传错误';
    }
    echo $errorMsg;
}
?>

核心注意事项 #

• 必须设置processData: false和contentType: false，否则jQuery会破坏FormData的结构，导致文件无法正常上传。
• 确保后端的uploads目录有写入权限，否则move_uploaded_file会执行失败。
• 如需避免文件名重复覆盖，可以给文件添加时间戳或随机前缀，这里保留原始文件名作为最简实现。

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