拖拽上传应用Ajax视频上传异常排查及加载状态实现咨询

一、大视频无法上传的排查与修复 #

1. 核心限制排查 #

大视频上传失败大概率是PHP或Web服务器的大小/超时限制导致，需调整以下配置：

PHP配置（修改php.ini，共享主机可使用.htaccess或user.ini）

• upload_max_filesize: 单个文件最大上传尺寸，建议设为64M及以上（如100M）
• post_max_size: POST请求总大小，必须大于upload_max_filesize，建议设为80M及以上
• max_execution_time: 脚本执行超时时间，大文件上传需延长，建议设为300（5分钟）
• max_input_time: 接收输入的超时时间，建议设为300

Apache服务器可在项目根目录创建.htaccess：

php_value upload_max_filesize 64M
php_value post_max_size 80M
php_value max_execution_time 300
php_value max_input_time 300

Nginx服务器需修改站点配置文件：

client_max_body_size 64M;

2. 服务器端错误处理增强

原ajax.php缺少错误检查，修改后可明确失败原因：

<?php
// 检查上传错误
if ($_FILES['file']['error'] !== UPLOAD_ERR_OK) {
    $errorMap = [
        UPLOAD_ERR_INI_SIZE => '文件超过PHP配置的upload_max_filesize限制',
        UPLOAD_ERR_FORM_SIZE => '文件超过表单指定的MAX_FILE_SIZE限制',
        UPLOAD_ERR_PARTIAL => '文件仅部分上传',
        UPLOAD_ERR_NO_FILE => '未选择文件',
        UPLOAD_ERR_NO_TMP_DIR => '服务器缺少临时文件夹',
        UPLOAD_ERR_CANT_WRITE => '无法写入文件到磁盘',
        UPLOAD_ERR_EXTENSION => 'PHP扩展阻止了文件上传'
    ];
    http_response_code(400);
    echo $errorMap[$_FILES['file']['error']] ?? '未知上传错误';
    die;
}

// 创建上传目录（支持递归创建）
$uploadDir = 'uploads';
if (!file_exists($uploadDir)) {
    if (!mkdir($uploadDir, 0777, true)) {
        http_response_code(500);
        echo '无法创建上传目录';
        die;
    }
}

$filename = time() . '_' . $_FILES['file']['name'];
$targetPath = $uploadDir . '/' . $filename;

// 验证文件移动结果
if (!move_uploaded_file($_FILES['file']['tmp_name'], $targetPath)) {
    http_response_code(500);
    echo '文件保存失败';
    die;
}

echo $targetPath;
die;

二、上传加载状态实现 #

1. 实现思路 #

• 每个文件上传开始时生成独立状态元素，显示“上传中”
• 可选通过onprogress事件显示上传进度
• 上传完成（成功/失败）后更新状态元素内容
• 新增专门容器统一管理上传状态

2. 代码修改 #

index.php（新增状态容器）

<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
    <div id="drag_upload_file">
        <p>Drop file here</p>
        <p>or</p>
        <p><input type="button" value="Select File" onclick="file_explorer();" /></p>
        <input type="file" id="selectfile" multiple="multiple"/>
    </div>
</div>
<!-- 新增上传状态容器 -->
<div id="upload-status-container" class="upload-status"></div>

u.js（修改上传逻辑，添加状态管理）

const statusContainer = document.getElementById('upload-status-container');

// 拖拽上传处理
function upload_file(e) {
    e.preventDefault();
    Array.from(e.dataTransfer.files).forEach(file => ajax_file_upload(file));
}

// 文件选择处理
function file_explorer() {
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() {
        Array.from(this.files).forEach(file => ajax_file_upload(file));
    };
}
  
function ajax_file_upload(file_obj) {
    if (!file_obj) return;

    // 创建单个文件的状态元素
    const statusItem = document.createElement('div');
    statusItem.className = 'status-item';
    statusItem.innerHTML = `<span>${file_obj.name}</span>: <span class="loading">上传中...</span>`;
    statusContainer.appendChild(statusItem);

    const form_data = new FormData();                  
    form_data.append('file', file_obj);
    const xhttp = new XMLHttpRequest();

    xhttp.open("POST", "../u/ajax.php", true);
    
    // 可选：显示上传进度
    xhttp.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            statusItem.querySelector('.loading').textContent = `上传中... ${percent}%`;
        }
    };

    // 上传完成处理
    xhttp.onload = function() {
        if (xhttp.status === 200) {
            statusItem.innerHTML = `<span>${file_obj.name}</span>: <span class="success">上传成功 → ${this.responseText}</span>`;
        } else {
            statusItem.innerHTML = `<span>${file_obj.name}</span>: <span class="error">上传失败 - ${this.responseText}</span>`;
        }
    };

    // 网络错误处理
    xhttp.onerror = function() {
        statusItem.innerHTML = `<span>${file_obj.name}</span>: <span class="error">网络错误，上传失败</span>`;
    };

    xhttp.send(form_data);
}

可选：添加基础CSS美化状态

.upload-status {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.status-item {
    margin: 8px 0;
    padding: 6px;
    border-radius: 4px;
}
.loading {
    color: #007bff;
}
.success {
    color: #28a745;
    background-color: #f8fff9;
    padding: 2px 4px;
    border-radius: 2px;
}
.error {
    color: #dc3545;
    background-color: #fff5f5;
    padding: 2px 4px;
    border-radius: 2px;
}

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