AJAX文件上传表单添加进度条失败的技术求助

看起来你已经找对了核心方向——利用XMLHttpRequest的upload事件监听上传进度，但大概率是细节没处理到位，我帮你梳理一套可直接运行的方案，避开那些容易踩的坑：

第一步：修正核心代码的错误点 #

你贴的代码片段里有个明显的变量名错误（evt写成了ev），这会直接导致进度逻辑中断。先看完整的修正版代码：

$("#uploadForm").submit(function(e) {
    e.preventDefault(); // 阻止表单默认跳转提交行为

    // 用表单直接构建FormData，确保表单包含file类型的input
    var formData = new FormData(this);

    $.ajax({
        url: 'your-php-handler.php', // 替换成你的PHP处理文件路径
        type: 'POST',
        data: formData,
        // 以下两个参数是文件上传的必备项，不能省略
        contentType: false, // 让浏览器自动处理文件上传的Content-Type
        processData: false, // 禁止jQuery处理FormData，避免文件数据被破坏
        xhr: function() {
            // 用jQuery内置的xhr对象，兼容性更好
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) { // 检查浏览器是否支持上传进度监听
                xhr.upload.addEventListener('progress', function(evt) {
                    if (evt.lengthComputable) {
                        // 计算上传进度百分比
                        var percentComplete = Math.round((evt.loaded / evt.total) * 100);
                        // 更新进度条（假设你有个id为progressBar的进度元素）
                        $('#progressBar').width(percentComplete + '%');
                        $('#progressBar').text(percentComplete + '%');
                    }
                }, false);
            }
            return xhr;
        },
        success: function(response) {
            // 上传完成后的逻辑，比如提示成功
            alert('上传完成：' + response);
            // 重置进度条状态
            $('#progressBar').width('0%');
        },
        error: function(xhr, status, error) {
            // 处理上传失败的情况
            alert('上传出错：' + error);
            $('#progressBar').width('0%');
        }
    });
});

第二步：搭配正确的HTML结构 #

你需要有对应的进度条容器，示例结构如下：

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="uploadFile" />
    <button type="submit">开始上传</button>
</form>
<!-- 进度条容器 -->
<div style="width: 300px; height: 20px; border: 1px solid #ccc; margin-top: 10px;">
    <div id="progressBar" style="width: 0%; height: 100%; background-color: #4CAF50; text-align: center; color: white; line-height: 20px;"></div>
</div>

第三步：PHP端的注意事项 #

你的PHP处理文件要确保能正常接收文件，不要输出任何额外调试内容（比如多余的echo），否则会干扰AJAX响应，甚至导致进度计算异常。简单的PHP示例：

<?php
// 确保uploads目录存在且有写入权限
$targetDir = 'uploads/';
if (!is_dir($targetDir)) mkdir($targetDir, 0755, true);

if ($_FILES['uploadFile']['error'] === UPLOAD_ERR_OK) {
    $targetFile = $targetDir . basename($_FILES['uploadFile']['name']);
    if (move_uploaded_file($_FILES['uploadFile']['tmp_name'], $targetFile)) {
        echo "文件上传成功";
    } else {
        echo "文件移动失败";
    }
} else {
    echo "上传错误，错误码：" . $_FILES['uploadFile']['error'];
}
?>

常见的失效原因排查 #

• 遗漏contentType: false和processData: false：这两个是AJAX上传文件的核心参数，jQuery默认会格式化数据，会直接破坏FormData结构。
• 变量名拼写错误：比如你代码里的evt和ev不一致，直接导致进度逻辑无法执行。
• 文件体积过小：如果上传的是几KB的小文件，进度条会瞬间完成，看起来像是没生效，可以换个几十MB的文件测试。
• 浏览器兼容性：虽然现代浏览器都支持，但如果要兼容旧版IE，可能需要用onprogress属性而非addEventListener，不过现在一般不需要考虑这个场景。

按照这个方案调整后，应该就能正常显示上传进度了。

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